CSS3 methods for Vertical centering

Question

At the moment I have found two different methods for vertically centering a paragraph.

footer {
 height: 10em;
 position: absolute; left: 0; right: 0;
 color: white; background-color: #333;
}
footer > p {
 background-color: lightBlue; 
}


footer.vcenter1 { bottom: 11em; transform-style: preserve-3d; }
footer.vcenter2 { bottom: 0; }

.vcenter1 > p {
 margin: 0;
 position: absolute;
 top: 50%; transform: translateY(-50%);
}

.vcenter2 { white-space: nowrap;  word-spacing:-.25em; }
.vcenter2:before, .vcenter2 > p { display: inline-block; vertical-align: middle; }
.vcenter2:before { content:"";  height: 100%; }
.vcenter2 > p { white-space: normal; word-spacing: normal; }

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <title>Test</title>
 <link href="Test.css" rel="stylesheet" />
</head>
<body>

<footer class="vcenter1">
 <p>
  test text
  some text   more text   and more text...   and more text...  and more text... and more text... and more text... and more text... and more text...
  <br>line3
 </p>
</footer>
<footer class="vcenter2">
 <p>
  test text
  some text   more text   and more text...   and more text...  and more text... and more text... and more text... and more text... and more text...
  <br>line3
 </p>
</footer>

</body>
</html>

In Firefox and Internet Explorer both seem to behave exactly the same. However is there anything in either of these two methods which might give rise to problems in other browsers?

Obviously the vcenter1 method (transform: translateY) is less CSS code but I have never been comfortable what was essentially designed to move an object at run-time for static positioning.

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) - There are far more than the two methods you mention above. — Turnip, Feb 07 '17 at 16:30

Omprakash Arumugam · Answer 1 · 2017-02-07T17:27:25.257

As far as I know vcenter1 (centering using position and transform) works perfectly in all modern browsers see browser support

You can also use flexbox see browser support

footer {
 height: 10em;
 position: absolute; left: 0; right: 0;
 color: white; background-color: #333;
}
footer > p {
 background-color: lightBlue; 
}

.vcenter3 { display: flex; justify-content: center; align-items: center; } 

.vcenter4 {
    height: 10em;
    line-height: 10em;
    text-align: center;
}
.vcenter4 > p {
    background-color: lightBlue;
    vertical-align: middle;
    display: inline-block;
    line-height: normal;
}

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <title>Test</title>
 <link href="Test.css" rel="stylesheet" />
</head>
<body>

<div class="vcenter4">
 <p>
  test text
  some text   more text   and more text...   and more text...  and more text... and more text... and more text... and more text... and more text...
  <br>line3
 </p>
</div>

<footer class="vcenter3">
 <p>
  test text
  some text   more text   and more text...   and more text...  and more text... and more text... and more text... and more text... and more text...
  <br>line3
 </p>
</footer>

</body>
</html>

Unfortunately Flexbox doesn't work in IE9 and there are still too many people using that to ignore. — NickC, Feb 07 '17 at 17:02
if you want to support then you should not use the method which involves transform property either. You can also try line-height hack — Omprakash Arumugam, Feb 07 '17 at 17:17

CSS3 methods for Vertical centering

1 Answers1