How to automatically center every objects/text inside different containers in the same page? - css

Question

Is there a way to center vertically and horizontally everything automatically inside different container in the same page? I tried use top 50% and vertically-align, but it didn't work. I want to center vertically automatically because if the object/text change size, it will center exactly right place. I succeed center horizontally and I don't want to use top: px;. How do I do that using html5 and css? center everything automatically
no center

Answer 1

vertical-align will only align inline elements relative to each other. It will not work the way you want.
To align vertically just as you show in your image, you need to use display: flex; which has additional css properties which you may find useful.

Answer 2

basically you can use
position: absolute;
top: 50%;
transform: translate(-50%);
for vertical alignment.
But for this to work, the surrounding elements have to have either a fixed height, or if they have a percentage height, also their parent elements and all elements around these all the way up to the body element need to have percentage heights.

Answer 3

Here's an alternative solution that defines table properties for the DIVs. In a table cell the content can be centered not only horizontally, but also vertically (in class .x).
Codepen: http://codepen.io/anon/pen/WwjQZw
HTML:
<div class="wrap">
<div class="row_wrap">
<div class="head x">
ONE
</div>
</div>
<div class="row_wrap">
<div class="middle x">
TWO TWO
</div>
</div>
<div class="row_wrap">
<div class="bottom x">
THREE
</div>
</div>
</div>
CSS:
body {
font-size: 36px;
color: green;
}
.wrap {
display: table;
width: 100%;
}
.row_wrap {
display: table-row;
}
.x {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.head {
height: 200px;
background: #fa4;
}
.middle {
height: 400px;
background: #4af;
}
.bottom {
height: 100px;
background: #a4f;
}