Вопрос по html, center, css – Попытка центрировать div по горизонтали и вертикали на экране [дубликаты]

23

На этот вопрос уже есть ответ здесь:

Лучший способ центрировать <div> на странице по вертикали и горизонтали? [Дубликат] 30 ответов

Я пытаюсь сделать 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>

Благодарю.

Нужно ли поддерживать ie7? mrtsherman
Я не очень беспокоюсь о поддержке ie7, хотя ie8 было бы неплохо. user1141887

Ваш Ответ

5   ответов
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, Эта техника должна бытьсовместим с IE8.

0

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

1

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

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

демонстрация) позволяет для любого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>
Большое спасибо. Я обязательно сохраню этот код сохраненным. В настоящее время я собираюсь использовать статическую ширину / высоту, чтобы быть в безопасности с более старыми версиями. user1141887
не работал у меня без статической ширины / высоты. что я делаю не так?jsfiddle.net/Victornpb/2X6M2/1 Vitim.us
@bfrohs спасибо в любом случае, мне нравится css, но я просто не могу понять отсутствие центрирования контента. любитьbox-align-vertical: middle; box-align-horizontal: center; а такжеtext-align-vertical: middle; мы застряли с уловками контейнеров, таблицами, отрицательными полями, высотой строк и т. д ... Vitim.us
@ Vitim.us Вы абсолютно правы, я думаю, что я плохо объяснил это решение (или не был в здравом уме, когда ответил). В любом случае, я обновил ответ, добавив более правильное объяснение и несколько улучшений (например, добавил полосу прокрутки, если окно меньше центрированного div). AFAIK, невозможно (по крайней мере, с текущими браузерами) иметь текучую ширину / высотуdiv по центру по горизонтали и вертикали (хотя этовозможно сimg). 0b10011
: first-child + html .absoluteCenter, * html .absoluteCenter {/ Статический код здесь * /} - и не за что :) 0b10011
29

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

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

Вы должны в первую очередь дать 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/

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

Это работает отлично, спасибо. :) user1141887
+1 как работает в IE7 и режиме совместимости просмотра. ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Если вы не хотите фиксировать высоту и ширину и хотите, чтобы ваш div адаптировался к разным размерам экрана; Вот простой способ добиться этого:jsfiddle.net/NT8Mn pratik
Рад, что это помогло. Имейте в виду, что если вы добавите больше текста, вам нужно настроитьheight:50px; а такжеmargin-top:-25px; соответственно. Margin-top долженВСЕГДА быть половиной от общей высоты! (То же самое сwidth а такжеmargin-left.) Jassi

Похожие вопросы