How to horizontally and vertically center align the text in the div?

Question

How can we center (horizontally and vertically) the text in this div?

HTML

<div class="text">   
hello is the the testhello is the the testhello is the the testhello is the the testhello is the the testhello is the the    
testhello is the the tes   
</div>

CSS

.text {
    width:150px; 
    background:red;
    float:left;
    height:150px;
    margin:10px; 
    text-align:center;
    word-wrap:break-word;
    overflow:hidden;
    color:white;
}

[This should answer your question.](http://stackoverflow.com/questions/5421334/vertical-and-horizontal-align-middle-and-center-with-css) — Andrew Backes, Apr 11 '14 at 12:47

score 2 · Accepted Answer · answered Apr 12 '14 at 06:04

2

Here is the full explanation here. Read this.

http://css-tricks.com/centering-in-the-unknown/

If you want to vertical & horizontal center to unknown height, width element. you must add the style for parent as display:table and the style for child as display:table-cell.

//UPDATED

if you know the height & width of the element.

Try this.

.parent {
  display:block;
  position:relative;
}

.child {
  display:block;
  height:x;
  width:y;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-x/2; //Half of the height with minus direction
  margin-left:-y/2; //Half of the width with minus direction
}

answered Apr 12 '14 at 06:04

Jeyarathnem Jeyachanthuru

1,151
10
21

Can you tell me why you have not used text-align:center? – variable Apr 12 '14 at 06:08
Text-align:center only work for horizontal. but if you want to be align vertical-center. you must add the style as display:table-cell to the element. Vertical align only work for **display:table-cell**. And Display:table-cell only work inside **display:table;** – Jeyarathnem Jeyachanthuru Apr 12 '14 at 06:11

score 1 · Answer 2 · answered Apr 11 '14 at 12:48

1

Example on codepen: http://codepen.io/anon/pen/BFqfx/

div {
  width:150px; 
  height:150px;
  line-height: 150px;
  background:red;   
  color: #fff;
}

div p {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  text-align: center;
}

Screenshot

enter image description here

answered Apr 11 '14 at 12:48

Fabrizio Calderan

120,726
26
164
177

Where is the p tag, in html body, inside div? – variable Apr 11 '14 at 12:54
what about my float:left;word-wrap:break-word;overflow:hidden;? – variable Apr 11 '14 at 12:55
I've just removed for simplicity. Add all the style you want – Fabrizio Calderan Apr 11 '14 at 12:59
your code does work in the CodePen, however wont work in my IE/Chrome, text not aligned horiz/vert. – variable Apr 11 '14 at 13:01
this is the codepen with all the style http://codepen.io/anon/pen/iupys/ and it works still fine on Chrome – Fabrizio Calderan Apr 11 '14 at 13:08

score 0 · Answer 3 · answered Apr 11 '14 at 12:51

0

DEMO

HTML

<div class="foo">
   <div class="bar">
       Unknown stuff to be centered.
   </div>
</div>

CSS

.foo{
   display: table;
   width: 100%;
}
.bar {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Article

answered Apr 11 '14 at 12:51

Pravin W

2,451
1
20
26

Luca Detomi · Answer 4 · 2015-04-13T09:17:42.887

There is another common technique, based upon "absolute positioning" and negative top margin.

HTML:

<div class="foo">
   <div class="bar">
       Unknown stuff to be centered.
   </div>
</div>

CSS:

.foo{
   width:150px;
    height:150px;
    background:red;
    position:relative;
}
.bar {
   text-align: center;
    position:absolute;
    top:50%;
    height:40px;
    margin-top:-20px;
    border:solid 1px blue;
}

The idea is that you move down to 50% from the top the inner div, and then push it up of half its height with negative margin-top.

Is very stable and cross-platform, the only constraint is you must know height of inner div.

To avoid this costraint, a workaround is replacing negative margin-top with a transform: translateY(-50%);. In this case, negative translation to center DIV is obtained visually with CSS transformation.

It's useful because in this way you can use it without knowing height of inner DIV, but remember that transformation are extracted from DOM rendering.

Ok.... you can simply set inner div to have width and height of 150px, and then apply a bigger width and height to the container. The principle is the same. — Luca Detomi, Apr 11 '14 at 13:09

How to horizontally and vertically center align the text in the div?

4 Answers4

Linked