Centering an item in the dead center of a page

Question

I'm trying to place some large text in the dead center of the page. I only want (prefer) a body tag in the page and nothing else. I've tried using display: table-cell and setting the vertical-alignment to middle but that did not work with a height: 100%

I then found another question on stackoverflow which addressed this problem but I realized it does not work with bigger font. This is what I have so far: http://jsfiddle.net/aECYS/

look at the fiddle, they did that. problem is they did more. And "dead center" implies top/bottom not just left/right especially when you look at the code they wrote and see `top:50%` is in there — Popnoodles, Jan 03 '13 at 07:29

score 5 · Accepted Answer · answered Jan 03 '13 at 07:35

5

Push the div to top and left based on the width and height specified.

CSS

 body{ background-color: #000;}
    div{
        background-color: #000;
        width:800px; 
        height: 200px; line-height: 200px;
        position: absolute;
        top: 50%; margin-top:-100px;
        left: 50%; margin-left:-400px;
        font-weight: bold;
        font-size: 100px;
        text-transform: uppercase;
        color: #ccc; text-align:center
    }

DEMO

answered Jan 03 '13 at 07:35

Sowmya

26,684
21
96
136

Note: This will only work with 1 line of text because of `line-height`. Good solution still though +1 – Adam Tomat Jan 03 '13 at 08:25

score 1 · Answer 2 · answered Jan 03 '13 at 07:32

1

If your position is absolute then you move your text anywhere you want change your css attribute with this.

Note: Absolutely positioned elements can overlap other elements.

position: absolute;
top: 37%;
left: 34%;

See Demo

Set width and height as 100%

width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;

Then the text center with the different screen size

answered Jan 03 '13 at 07:32

Dineshkani

2,899
7
31
43

4

how about different screen sizes and devices ? – Amyth Jan 03 '13 at 07:33
2

why -1 i say the answer for that – Dineshkani Jan 03 '13 at 07:39

score 1 · Answer 3 · answered Feb 10 '21 at 04:50

1

.Absolute-Center {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 }

is the best way, choose your class though here.

answered Feb 10 '21 at 04:50

Fawad.Ahmade

11
4

Centering an item in the dead center of a page

3 Answers3

Linked