I am working with a div that is 100% of the parent divs height.
The div only contains a single line of text.
The div cannot have a fixed height.
So my question is.
How do I vertically center the line of text?
I have tried using:
display: table-cell;
line-height:200%;
If it is important the div is absolutely positioned.
.requests {
position: absolute;
right: 0;
height: 100%;
width: 50px;
padding: 0 10px;
background-color: #69A4B5;
display: table-cell;
vertical-align: middle;
border-bottom-right-radius: 5px;
}
Even though this question is pretty old, here's a solution that works with both single and multiple lines that need to be centered vertically (could easily be centered both vertically & horizontally as seen in the css in the Demo.
<div class="parent">
<div class="child">Text that needs to be vertically centered</div>
</div>
.parent {
position: relative;
height: 400px;
}
.child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Modern solution - works in all browsers and IE9+
caniuse - browser support.
.v-center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Example: http://jsbin.com/rehovixufe/1/
If you know how tall your text is going to be you can use a combination of top:50% and margin-top:-x px where x is half the height of your text.
Working example: http://jsfiddle.net/Qy4yy/
have you tried line-height:1em;? I recall that that's the way to get it to center vertically.
Did you try vertical-align: middle ???
You can find more info on vertical-align here: http://www.w3schools.com/css/pr_pos_vertical-align.asp
I disagree, here's a JS free solution, which works:
<html style="height: 100%;">
<body style="vertical-align: middle; margin: 0px; height: 100%;">
<div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
<div style="display: table-cell; width: 100%; vertical-align: middle;">
<div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
</div>
</div>
</body>
</html>
The best and easiest way to do it (currently in 2015 2020) is using flexbox:
.parent-selector {
display: flex;
align-items: center;
}
And that's it :D
Check-out this working example:
div {_x000D_
border: 1px solid red;_x000D_
height: 150px;_x000D_
width: 350px;_x000D_
justify-content: center;_x000D_
_x000D_
/* Actual code */_x000D_
display: flex;_x000D_
align-items: center;_x000D_
}<div>_x000D_
<p>Hola</p>_x000D_
</div>Old answer: You can use vertical-align: middle if you specify also display: table-cell;
.div {
display: table-cell;
vertical-align: middle;
}
Working example:
div {_x000D_
border: 1px solid red;_x000D_
height: 150px;_x000D_
width: 350px;_x000D_
text-align: center;_x000D_
_x000D_
/* Actual code */_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}<div>_x000D_
<p>Hola</p>_x000D_
</div>If it does not work you can try setting its parent as display: table;:
.parent-selector {
display: table;
}
Edit: You have this method plus all the methods covered on this question in this other question: How do I vertically center text with CSS?
Vertical align, dynamic height combined with absolute position is except some special conditions not possible without a few lines of JS (eg. jQuery). (can possibly be solved with backend code in some cases, or min-height combined with sensible top or margin styles, but not perfect)
I mostly only use absolute position when something is supposed to "popup" in relation to something else which is in the float, I think that's the best way to use it so you don't have to fiddle with things like this.
No offense, but most answers in here are way off.
Try this one http://jsfiddle.net/Husamuddin/ByNa3/
it works fine with me,
css
.table {
width:100%;
height:100%;
position:absolute;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%:
}
and the html
<div class="table">
<div class="cell">Hello, I'm in the middle</div>
</div>
Setting the line height to the same as the height of the div will cause the text to center. Only works if there is one line. (such as a button).
Since it is absolutely positioned you can use top: 50% to vertically align it in the center.
But then you run into the issue of the page being bigger than you want it to be. For that you can use the overflow: hidden for the parent div. This is what I used to create the same effect:
The CSS:
div.parent {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
div.parent div.absolute {
position: absolute;
top: 50%;
height: 300px;
}
The HTML:
<div class="parent">
<div class="absolute">This is vertically center aligned</div>
</div>
just wrap your content with a table like this:
<table width="100%" height="100%">
<tr align="center">
<th align="center">
text
</th>
</tr>
</table><
Source: Stackoverflow.com