I am trying to get blue container in the middle of pink one, however seems vertical-align: middle;
doesn't do the job in that case.
<div style="display: block; position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
<div style="background-color: lightblue;">test</div>
</div>
</div>
Result:
Expectation:
Please suggest how can I achieve that.
This question is related to
html
css
vertical-alignment
absolute
use this :
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
refer this link: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
You can do it by using display:table;
in parent div and display: table-cell; vertical-align: middle;
in child div
<div style="display:table;">_x000D_
<div style="text-align: left; height: 56px; background-color: pink; display: table-cell; vertical-align: middle;">_x000D_
<div style="background-color: lightblue; ">test</div>_x000D_
</div>_x000D_
</div>
_x000D_
An additional simple solution
HTML:
<div id="d1">
<div id="d2">
Text
</div>
</div>
CSS:
#d1{
position:absolute;
top:100px;left:100px;
}
#d2{
border:1px solid black;
height:50px; width:50px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
For only vertical center
<div style="text-align: left; position: relative;height: 56px;background-color: pink;">
<div style="background-color: lightblue;position:absolute;top:50%; transform: translateY(-50%);">test</div>
</div>
_x000D_
I always do like this, it's a very short and easy code to center both horizontally and vertically
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
_x000D_
<div class="center">Hello Centered World!</div>
_x000D_
Here is simple way using Top object.
eg: If absolute element size is 60px.
.absolute-element {
position:absolute;
height:60px;
top: calc(50% - 60px);
}
You may use display:table
/table-cell;
.a{_x000D_
position: absolute; _x000D_
left: 50px; _x000D_
top: 50px;_x000D_
display:table;_x000D_
}_x000D_
.b{_x000D_
text-align: left; _x000D_
display:table-cell;_x000D_
height: 56px;_x000D_
vertical-align: middle;_x000D_
background-color: pink;_x000D_
}_x000D_
.c {_x000D_
background-color: lightblue;_x000D_
}
_x000D_
<div class="a">_x000D_
<div class="b">_x000D_
<div class="c" >test</div>_x000D_
</div>_x000D_
</div>
_x000D_
Use flex blox in your absoutely positioned div to center its content.
See example https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview
.some-absolute-div {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
Center vertically and horizontally:
.parent{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.c{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
Source: Stackoverflow.com