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

Ответ 1

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

Обновление: flexbox теперь поддерживается всеми современными браузерами.

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

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

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. Я немного изменил стиль, чтобы вы могли прочитать текст. Надеюсь, это поможет!

Ответ 2

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

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>

Ответ 3

То, что вы ищете, это 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. Этот метод должен быть совместим с IE8.

Ответ 4

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

 .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;
 }

Ответ 5

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