Попытка центрировать div горизонтально и вертикально на экране

Question

Я пытаюсь сделать div для моей целевой страницы моего веб-центра в самом центре экрана, но он не работает.

Вот мой код

CSS:

.centerDiv{ 
width:800px; 
margin:0 auto; 
border-radius: 5px; 
background:#111; 
padding:10px;} 

HTML:

<div id="centerDiv" class="centerDiv"> 
    <h1>Title</h1> 
    <p>Text will go here.</p> 
</div> 

Спасибо.

Answer 1

Примечание: Если вы пытаетесь центрирования DIV по горизонтали и по вертикали Я предлагаю смотреть в flexbox. Вы по-прежнему должны будете поддерживать резервную поддержку, но flexbox - это будущее, и это потрясающе.

Обновление: flexbox поддерживается всеми modern browsers сейчас.

Прежде всего, необходимо предоставить div статическую ширину и высоту.

Во-вторых, вы должны установить position: absolute; и left: 50%; top: 50%;, то вы должны сделать margin-left и margin-top, которые составляют половину высоты и ширины. Затем он отобразится правильно.

CSS:

.centerDiv{ 
    width: 800px; 
    border-radius: 5px; 
    background: #ccc; 
    padding: 10px; 
    height: 50px; 
    position: absolute; 
    margin-top: -25px; 
    margin-left: -400px; 
    top: 50%; 
    left: 50%; 
} 

http://jsfiddle.net/wJ7dY/

P.S. Я немного изменил стиль, чтобы вы могли прочитать текст. Надеюсь это поможет!

Answer 2

Попробуйте следующее:

.centerDiv{ 
    position: absolute; 
    top: 50%; 
    height: 400px; 
    margin-top: -200px; /* Half of the height */ 
    left: 50%; 
    width:800px; 
    margin-left: -400px; /* Half of the width */ 
    border-radius: 5px; 
    background:#111; 
    padding:10px; 
} 

Answer 3

Этот код (demo) позволяет для любого width и height быть установлены без необходимости обновлять какие-либо другие свойства (например, top = height/2) или полагаться на методы, которые Арен» т хорошо поддерживается (например, display:table; Один недостаток является поддержка старых версий IE не хватает Комбинируя это с другим решением для IE только, вероятно, вы лучше всего

The CSS:...

.absoluteCenter { 
/* Must manually set width/height */ 
width:800px; 
height:500px; 

/* The magic centering code */ 
margin:auto; 
position:absolute; 
top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */ 
left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only */ 

/* Prevent div from overflowing main window */ 
max-width:100%; 
max-height:100%; 
overflow:auto; 
} 

/* IE 7 and Below */ 
:first-child+html .absoluteCenter, 
* html .absoluteCenter { 
/* Place code here to override all above values, and add IE friendly centering */ 
} 

И HTML:

<div class="absoluteCenter"> 
Content of DIV 
</div> 

Answer 4

набора маржа авто вместо 0 авто и вам нужна высота. Я думаю, 100% для вашей цели.

Answer 5

Что вы ищете, это display:table и display:table-cell. Этот параметр должен вертикально выравнивать элемент #center в элементе #parent независимо от высоты элемента #center. Я верю, что вам требуется высота элемента #parent.

HTML

<div id="parent"> 
<div id="center"> 
    <h1>Title</h1> 
    <p>Text will go here.</p> 
</div> 
</div> 

CSS

#parent{ 
display: table; 
width: /* Your width */; 
height: /* Your height */; 
} 

#center{ 
position: relative; 
display: table-cell; 
width: /* Your width */; 
height: /* Your height */; 
vertical-align: middle; 
margin: 0 auto; 
} 

Я просто использовал это вчера, используя display:table на body. Этот метод должен быть compatible through to IE8.