True Center Vertical and Horizontal CSS Div

Question

How is it possible to create a true center CSS div cross browser for example to use within a holding page?

I have tried this 2007 css trick - How To Center an Object Exactly In The Center but as you can see from my JSFiddle of the code its not 100% center.

HTML:

<div class="center">
  <p>Text</p>
</div>

CSS:

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
  border:5px solid black;
}

Ah. Question really should indicate that the intention is to *vertically* center elements. — user229044, Jan 07 '13 at 03:57

score 11 · Accepted Answer · edited Mar 19 '15 at 13:17

That technique requires the element to have a fixed width and height. You are not setting the width and height. Based on your border and margins, to center it, the width would need to be 190 pixels and the height would need to be 90 pixels. Using line-height and text-align in combination with a fixed width and height makes the text and border centered. Try it.

CSS

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  margin-top: -50px;
  margin-left: -100px;
  border:5px solid black;
}

score 10 · Answer 2 · edited Apr 17 '15 at 16:16

10

You can do it with pure CSS:

html {
  width: 100%;
  height: 100%;
}
body {
  min-width: 100%;
  min-height: 100%;
}
div.centeredBlueBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 300px;
  height: 200px;
  background-color: blue;
}

It is important to give concrete (eg: 300px) and not derived (like: auto or 30%) values for width and height.

edited Apr 17 '15 at 16:16

dg99

5,456
3
37
49

answered Jan 20 '13 at 09:35

Gixx Man

111
2

I think, this works best. It still works with resizing the content, without the need to recalc other sizes as well – BananaAcid Jul 29 '13 at 17:37

derWilly · Answer 3 · 2013-01-07T04:00:46.707

3

<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>

for example

<!DOCTYPE html>
<html>
<body>
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div>
</body>
</html>

edited Jan 07 '13 at 04:00

answered Jan 07 '13 at 03:54

derWilly

455
3
15

score 2 · Answer 4 · answered Jul 24 '13 at 08:15

That's my solution:

<div style="position: absolute; left: 50%; height: 100%;">
    <div style="position: relative; left: -50%; display: table; height: 100%;">
        <div style="display: table-cell; vertical-align: middle;">
            //your content here
        </div>
    </div>
</div>

It works in a lot of browsers. And there is no problem with content added after layout.

score 2 · Answer 5 · answered Aug 14 '13 at 20:38

This is an extra example with a height setter I created for IE vertical alignment. The extra span has a vertical-align:middle.

<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        overflow:hidden;
        text-align:center;
    }
    html, body{
        height: 100%;
    }
    #loginContainer {
        margin: 0 auto;
        display: table;
        min-width:300px;
        text-align:left;
        height: 85%; /* vertical align not exact in the middle */
    }
    #loginContainer .label{
        width: 25%;
        float:left;
        white-space:nowrap;
        line-height:20px;
    }
    #loginContainer h2{
        border-bottom:2px solid #B4C3E1;
        border-width:0 0 3px;
        padding:2px 4px;
    }
    .mainHeader {
        position:absolute;
        top:0;
        left:0; 
        text-align:center; 
        width:100%; 
        font-size:2em;
        white-space:nowrap;
    }
    .detailsText {
        border-top:1px solid #F60;
        margin-top:5px;
        clear:both;
    }
    /* layout horizontal and vertical */
    .horizontalBox {
        display: table-cell;
        vertical-align: middle; /* not seen by IE6-7 */
        height: 100%;
        white-space: nowrap;
    }
    .verticalBox {
        padding: 55px 0 0 0; /* 55px height of logo */
    }
    .rightText {
        text-align:right;
    }
</style>
<!--[if lte IE 8]>
<style type="text/css">
    #loginContainer {
        width:300px; /* minimum width */
    }
    .horizontalBox {
        text-align: center;
    }
    .verticalBox, .heightSetter {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        zoom:1;
    }
    .heightSetter {
        height: 100%;
    }
    .verticalBox {
        display: inline;
        height: 0;
    }
    .heightSetter {
        width: 1px;
    }
</style>    
<![endif]-->
<div class="mainHeader">This is the Header content</div>
<div id="loginContainer">
    <div class="horizontalBox">
        <div class="verticalBox">
            <h2>My header of the vertical box</h2>
            <p>My Content</p>
        </div>
        <span class="heightSetter"></span>
    </div>
</div>

score 2 · Answer 6 · edited Apr 17 '15 at 16:55

2

Have a look at this; quite a clever article.

edited Apr 17 '15 at 16:55

atiquratik

1,296
3
27
34

answered Dec 23 '13 at 23:57

Alessandro Lo Verde

21
4

score 2 · Answer 7 · edited Apr 17 '15 at 16:34

2

Set the display type of the DIV to table-cell. Then you can use normal vertical-align, just like a TD element.

<div style="display: table-cell; vertical-align: middle; height: 200px;">
Centered Text
</div>

edited Apr 17 '15 at 16:34

atiquratik

1,296
3
27
34

answered Mar 20 '14 at 00:59

kpruner

21
1

score 1 · Answer 8 · answered Jan 07 '13 at 03:57

This is what I did

<html>
<head>
    <title>Page Title</title>

    <style>
       .center { margin:auto; width:500px; background-color:green; }
    </style>
</head>
<body>
    <div class="center">
        <p>Help me please</p>
    </div>
</body>
</html>

Hope this helps.

True Center Vertical and Horizontal CSS Div

8 Answers8

Linked