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

Как вертикально центрировать 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 ]

1 голос
/ 31 августа 2017

Это решение сработало для меня, если у вас есть блочный элемент (например,). Я использовал цвета, чтобы сделать решение более четким.

HTML: 

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS: 

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

JSFiddle Code Demo

1 голос
/ 29 августа 2017

Содержимое может быть легко отцентрировано с помощью flexbox. Следующий код показывает CSS для контейнера, внутри которого содержимое должно быть центрировано: 

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
0 голосов
/ 27 октября 2015

Объявите этот миксин: 

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Затем включите его в свой элемент: 

.element{
    @include vertical-align();
}
0 голосов
/ 16 декабря 2014

Я только что нашел другой способ, который работал для меня: 

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS 

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Дополнительная информация

0 голосов
/ 07 февраля 2015

по вертикали и горизонтали ЦЕНТР

HTML 

<div id="dialog">Centered Dialog</div>

CSS 

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

Наслаждайтесь!

0 голосов
/ 10 февраля 2015

Используя свойство transform, мы можем легко сделать вертикально центрированный div. 

.main-div {
    background: none repeat scroll 0 0 #999;
    font-size: 18px;
    height: 450px;
    max-width: 850px;
    padding: 15px;
}

.vertical-center {
    background: none repeat scroll 0 0 #1FA67A;
    color: #FFFFFF;
    padding: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
<div class="main-div">
    <div class="vertical-center">
        <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
    </div>
</div>

Полный текст статьи см. Здесь

0 голосов
/ 13 марта 2015

Для вертикального выравнивания поля на веб-странице, включая Internet Explorer 6, вы можете использовать:

  1. Условные комментарии
  2. Свойство haslayout
  3. display: table-value для других (и теперь гибкий)

Fiddle 

/* Internet Explorer 8 and others */
.main {
  width: 500px;
  margin: auto;
  border: solid;
}
html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
}
<!-- [if lte IE 7]>
<style> /* Should be in the <head> */
    html, body , .ie {
        height: 100%;
        text-align: center;
        white-space: nowrap;
    }
    .ie , .main{
        display: inline; /* Used with zoom in case you take a block element instead an inline element */
        zoom: 1;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }
</style>
<b class="ie"></b>
<!--[endif]-->
<div class="main">
  <p>Fill it up with your content </p>
  <p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>
</div>

На самом деле, Internet Explorer 7 здесь принесет некоторые проблемы, будучи единственным, который будет строго применять height: 100% к элементам HTML / body.

Но, это прошло и сегодня, и кто все еще возражает против старых версий Internet Explorer, table/table-cell просто отлично, display: flex многообещающе, и display: grid появится когда-нибудь.

0 голосов
/ 26 марта 2015

Вот простой способ, почти без кода:

Код CSS: 

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

HTML код: 

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

Ваш текст будет в середине страницы!

0 голосов
/ 26 августа 2015

Лучшее, что можно сделать: 

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150 пикселей, потому что в этом случае это половина высоты div.

0 голосов
/ 05 апреля 2016

Это, безусловно, самый простой подход, он работает и с неблокирующими элементами, единственным недостатком является Flexbox, поэтому старые браузеры не будут его поддерживать. 

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

Ссылка на codepen:

http://codepen.io/damianocel/pen/LNOdRp

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

Страница:
...