Aligning <div> in vertically center [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
vertical align middle in <div>
(11 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
I cannot align #container and its content in the center vertically. I thought adding further <div> tags would be a problematic and I cannot control them.
I want the text and #container to be aligned in the center of .content vertically without adding any extra space.
#container {
display: grid;
padding: 20px;
grid-template-areas: 'sideone sideone sidetwo sidetwo sidethree sidethree';
grid-gap: 20px;
text-align: center;
}
.content {
display: table;
margin: 15px;
height: 500px;
width: 100%;
transition-duration: 0.15s;
border: 2px solid #3B3B3B;
}
<div class="content">
<div id="container">
<div style="grid-area: sideone;">
<p>あ - ა</p>
<p>い - ი</p>
<p>う - უ</p>
<p>え - ე</p>
<p>お - ო</p>
</div>
<div style="grid-area: sidetwo">
<p>か - კა</p>
<p>さ - სა</p>
<p>た - ტა</p>
<p>な - მა</p>
<p>は - ჰა</p>
</div>
<div style="grid-area: sidethree">
<p>き - კი</p>
<p>し - ში</p>
<p>ち - ჩი</p>
<p>に - ნი</p>
<p>み - მი</p>
</div>
</div>
</div>

Answer 1

add margin:0px auto; into .content and it should align it to the center of the container.
it should loook something like this:
.content {
display: table;
margin: 15px;
height: 500px;
width: 100%;
transition-duration: 0.15s;
border: 2px solid #3B3B3B;
margin:0px auto;
}