CSS - Unable to center text vertical and horizontally

Question

I have a text that I want to center. I've googled it and I tried some techniques, such as table display, but none of them works.

The nearest I've been to center it, is with the following CSS:

#wrapper {
    position: fixed;
    width: 500px;
    top: 45%;
    left: 30%;
}

With trial and error...

And, of course, depending on the screen, the error is more, or less evident.

To center align text horizontally, an option is to use the rule `text-align: center` — aliasm2k, Dec 19 '15 at 17:08

score 2 · Accepted Answer · answered Dec 19 '15 at 17:08

You can use CSS3's transform: translate(-50%, -50%); after you set your element at top:50%; left: 50%;

.absoluteCenter{
  background:red;
  padding:24px;

  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

<div class="absoluteCenter">HELLO WORLD</div>

score -2 · Answer 2 · answered Dec 19 '15 at 17:10

-2

try the following:

#wrapper{
//all of the other properties
text-align:center // should center your text

}

answered Dec 19 '15 at 17:10

Yair Mishnayot

2 Answers2