How to vertically and horizontally centerd text using css

Question

Hello I am trying to vertically align some text but cant figure it out. Ive searched google and even the example I came across does not seem to be working and I have no idea why.

Here is my code:

<style type="text/css">
body {
    background-color: #9E5A5B;
}
body,td,th {
    font-size: 36px;
    color: #000000;
}
.block-of-text p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

</style>


</head>

<body>
<section class="block-of-text">
  <p>
Text I want vertically and horizontally centered.</p>
</section>

jsFiddle http://jsfiddle.net/0xvart2t/

If this isnt possible the way im trying to go about it maybe someone can give me a better example of how to accomplish what Im trying to accomplish. Thank you for your time.

possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — A.L, Nov 23 '14 at 15:41
possible duplicate of [CSS Center text (Horizontal and Vertical) inside a DIV block](http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block) — planestepper, Nov 23 '14 at 15:42
to use `top: 50%;` you need the element's position set to 'absolute' or 'fixed' — Velimir Tchatchevsky, Nov 23 '14 at 16:10

score 0 · Answer 1 · answered Nov 23 '14 at 15:43

0

CSS trick to vertically align and element's inners

margin-bottom: -99999px;
padding-bottom: 99999px;

To center an element horizontally use margin:0 auto; or to be concrete use margin-left:auto; and margin-right:auto;

answered Nov 23 '14 at 15:43

Velimir Tchatchevsky

2,812
1
16
21

score 0 · Answer 2 · answered Nov 23 '14 at 16:00

you could do something like this:

<html>
<head>
<style type="text/css">
body {
    background-color: #9E5A5B;
}
body,td,th {
    font-size: 36px;
    color: #000000;
}
.div-style{
 width:500px;
    height:200px;
    position: absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}
</style>
</head>
<body>
<div class="div-style">
  <p>Text I want vertically and horizontally centered.</p>
<div>
</body>
</html>

score 0 · Answer 3 · answered Nov 23 '14 at 16:44

demo - http://jsfiddle.net/0xvart2t/

set position:absolute instead position:relative of .block-of-text p and remove default browser styles

* {
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #9E5A5B;
}
body {
  font-size: 36px;
  color: #000000;
}
.block-of-text {
  text-align: center;
}
.block-of-text p {
  position: absolute;
  ;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<section class="block-of-text">
  <p>
    Text I want vertically and horizontally centered.</p>
</section>

Okay well im stil not sure what I am doing wrong. You can view the page at http://graymatterfc.us and maybe tell me what I am doing wrong. The text is now vertically centered but still not horizontally. — Randy Bailey, Nov 23 '14 at 22:48

score -1 · Answer 4 · answered Nov 23 '14 at 15:41

-1

You can use 2 different things:

verical-align: vertical-align;

OR

line-height: 200%; (or something like that);

Hope this helped!

answered Nov 23 '14 at 15:41

Sjenkie

207
2
3
14

How to vertically and horizontally centerd text using css

4 Answers4