Как вертикально центрировать div для всех браузеров? - PullRequest
Новая
       117

Как вертикально центрировать div для всех браузеров?

1254 голосов
/ 28 декабря 2008

Я хочу центрировать div по вертикали с помощью CSS. Я не хочу таблиц или JavaScript, а только чистый CSS. Я нашел несколько решений, но во всех них отсутствует поддержка Internet Explorer 6. 

<body>
    <div>Div to be aligned vertically</div>
</body>

Как я могу центрировать div по вертикали во всех основных браузерах, включая Internet Explorer 6?

Ответы [ 42 ]

3 голосов
/ 23 января 2018

Я думаю, что солидное решение для всех браузеров без использования flexbox - "align-items: center;" является комбинацией отображения: таблица и выравнивание по вертикали: середина;.

CSS 

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML 

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣демо: https://jsfiddle.net/6m640rpp/

2 голосов
/ 20 ноября 2017

Не отвечает за совместимость браузера, но также упоминает новую Grid и не очень новую функцию Flexbox.

Сетка

От: Mozilla - Grid Documentation - Выровнять Div по вертикали

Поддержка браузера: Поддержка браузера сетки

CSS: 

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML: 

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Поддержка браузера: Поддержка браузера Flexbox

CSS: 

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
2 голосов
/ 20 ноября 2014

Специально для родительских элементов div с относительной (неизвестной) высотой центрирование в неизвестном решении отлично работает для меня. В статье есть несколько действительно хороших примеров кода.

Он был протестирован в Chrome, Firefox, Opera и Internet Explorer. 

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>
2 голосов
/ 10 февраля 2019

CSS Grid 

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>
2 голосов
/ 26 января 2013

Я сделал это с этим (измените ширину, высоту, margin-top и margin-left соответственно): 

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>
1 голос
/ 21 июля 2014

Я использую это. Он работает в Internet Explorer 8 и более поздних версиях:

height:268px - для display:table действует как минимальная высота.

CSS: 

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML: 

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>
1 голос
/ 23 декабря 2015

Следующее работает в моем случае и было протестировано в Firefox. 

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

Высота div и высота родителя являются динамическими. Я использую его, когда есть другие элементы на том же родительском элементе, который выше, чем целевой элемент, где оба расположены горизонтально на линии.

1 голос
/ 11 августа 2013

Я считаю этот вариант наиболее полезным .. он дает наиболее точную схему 'H' и очень прост для понимания.

Преимущество этой разметки заключается в том, что вы определяете размер контента в одном месте -> "PageContent".
Цвета фона страницы и его горизонтальные поля определены в соответствующих элементах div. 

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

А вот с выделенным CSS: 

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}
1 голос
/ 17 марта 2015

Просто сделайте это: добавьте класс по вашему div: 

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

И прочитайте эту статью для объяснения. Примечание: Height необходимо.

1 голос
/ 09 апреля 2019

Недавно я обнаружил одну хитрость: вам нужно использовать top 50%, а затем вы делаете translateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}
<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>
Страница:
...