Center Text Vertically Within <DIV>
Solution 1:
This:
<!DOCTYPE html>
<style>
.outer { outline: 1px solid #eee; }
.outer > p { display: table-cell; height: 200px; vertical-align: middle; }
</style>
<div class="outer">
<p>This text will be vertically aligned</p>
</div>
<div class="outer">
<p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>
works in modern browsers, regardless of whether text spans only one or multiple lines.
Also updated the fiddle at http://jsfiddle.net/74Rnq/135/ Not sure what you were doing with a 625px margin on the left when the thing itself was only 150px in width… Tidied things up a bit by removing the inline styling and using a bit of padding as well.
Solution 2:
You can try setting the line-height to the height of the div, like this:
<div style="height:200px;border:1px solid #000;">
<span style="line-height:200px;">Hello world!</span>
</div>
Here's another technique that seems to work:
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
}
<div style="position:relative;height:200px;">
<div id="vertical">
Hello world!
</div>
</div>
Solution 3:
I know this method adds some HTML, but it seems to work in all major browsers (even IE7+).
Basic HTML Structure
<div id="hold">
<div>Content</div>
<div class="aligner"> </div>
</div>
Require CSS
#hold{
height:400px;
}
div{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align:middle;
}
.aligner{
width:0px;
height:100%;
overflow:hidden;
}
The jsFiddle
Solution 4:
As shown below you can easily just set the parent of a text element to position: relative, and the text element itself to position: absolute; Then use direction properties to move around the text inside the parent. See examples below...
<!--Good and responsive ways to center text vertically inside block elements-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centered Text®</title>
<style type="text/css">
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica;
}
#wrapper {
width: 100%;
height: auto;
}
#wrapper > div {
margin: 40px auto;
overflow: hidden;
position: relative;
height: 100px;
width: 50%;
}
p {
position: absolute;
word-wrap: break-word;
text-align: center;
color: white;
background-color: rgba(0,0,0,0.5);
}
#parent1 {
background-color: orange;
}
#parent1 p {
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
height: auto;
width: auto;
padding-top: 30px; /* Parent1's height * 0.5 = parent1 p's padding-top (Adjust to make look more centered) */
}
#parent2 {
background-color: skyblue;
}
#parent2 p {
left: 50%;
top: 50%;
padding: 10px;
transform: translate(-50%, -50%);
}
#parent3 {
background-color: hotpink;
}
#parent3 p {
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="parent1">
<p>Center Method 1</p>
</div>
<div id="parent2">
<p>Center Method 2</p>
</div>
<div id="parent3">
<p>Center Method 3</p>
</div>
</div>
</body>
</html>