How to vertically align a block using css?

Question

css

Hello.
My question is: I am using bootstrap

<div class="container">
<div class="row">
<div class="col-sm-6">Hello</div>
<div class="col-sm-6">Hello</div>
</div>
</div>

.row{
display:table;
width:100%
}
.col-sm-6{
display:table-cell;
vertical-align:middle;
float:none;
}

When using this code, everything is vertically centered. But when the size of the .container becomes 100% then the problems start, the container shrinks to the left because the .row in bootstrap has -15px on both sides and I set its width to 100%. That is, .container - 100% > .row - 100%. of course everything breaks down.
How can I fix this, maybe there are some styles? Thank you.

Answer 1

Centering in CSS