61

I would like some text to be centered in the bottom of the screen.

I tried this, but it doesn't work. It looks like absolute positioning conflicts with the alignment.

How could I achieve this simple task ?

Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
  • 1
    the last answer accepted, which is simply repeated other solutions. Lol. – Happy May 11 '10 at 07:10
  • possible duplicate of [Center Align on a Absolutely Positioned Div](http://stackoverflow.com/questions/252856/center-align-on-a-absolutely-positioned-div) – T.Todua Jul 01 '14 at 15:46

6 Answers6

168

The div doesn't take up all the available horizontal space when absolutely positioned. Explicitly setting the width to 100% will solve the problem:

HTML

<div id="my-div">I want to be centered</div>​

CSS

#my-div {
   position: absolute;
   bottom: 15px;
   text-align: center;
   width: 100%;
}

​

Martin Burch
  • 2,726
  • 4
  • 31
  • 59
Pär Wieslander
  • 28,374
  • 7
  • 55
  • 54
  • 7
    That is ridiculously simple ... but.... I found this post by looking for the answer to this question. Thank you! – dgo Jan 22 '15 at 02:04
  • Thanks @Edward, without left:0; there appeared a horizontal scroll bar! – burkay Nov 28 '18 at 02:15
30

Try this:

http://jsfiddle.net/HRz6X/2/

You need to add left: 0 and right: 0 (not supported by IE6). Or specify a width

Eric
  • 95,302
  • 53
  • 242
  • 374
5

This should work:

#my-div { 
  left: 0; 
  width: 100%; 
}
bobbyrne01
  • 6,295
  • 19
  • 80
  • 150
Happy
  • 881
  • 7
  • 16
  • 32
2

Maybe specifying a width would work. When you position:absolute an element, it's width will shrink to the contents I believe.

tau
  • 6,499
  • 10
  • 37
  • 60
1

just add left:0; right:0; or add width

Ramshin
  • 21
  • 4
0
position: absolute;
color: #ffffff;
font-weight: 500;
top: 0%;
left: 0%;
right: 0%;
text-align: center;
SouMitya chauhan
  • 281
  • 2
  • 5