Використання поля: авто для вертикального вирівнювання знака

Тож я знаю, що ми можемо централізувати діви горизонтально, якщо будемо використовувати margin:0 auto;. Повиненmargin:auto auto; працювати, як я думаю, що це має працювати? Центрируйте його також вертикально?

Чому також не vertical-align:middle;працює?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Оновити серпня 2020 року

Хоча нижче все ще варто прочитати корисну інформацію, у нас Flexbox вже деякий час, тому просто використовуйте це відповідно до цієї відповіді .

Ви не можете використовувати:

vertical-align:middleтому що це не застосовується до елементів рівня блоків

margin-top:autoі margin-bottom:autoтому, що використані ними значення обчислюються як нульові

margin-top:-50%тому що значення процентної границі на основі відсотків обчислюються відносно ширини блоку, що містить

Насправді характер документообігу та алгоритми розрахунку висоти елементів унеможливлює використання поля для центрування елемента вертикально всередині його батьківського пристрою. Щоразу, коли значення вертикального поля буде змінено, воно запускатиме перерахунок висоти батьківського елемента (повторний потік), що, в свою чергу, викликає повторний центр вихідного елемента ... роблячи його нескінченним циклом.

Ви можете використовувати:

Кілька подібних вирішень, які працюють для вашого сценарію; три елементи повинні бути вкладені так:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

JSFiddle прекрасно працює відповідно до браузера.

Оскільки це питання було задано у 2012 році, і ми пройшли довгий шлях із підтримкою браузера для флексофілів, я відчув, що ця відповідь є обов'язковою.

Якщо дисплей вашого батьківського контейнера flex, то да , margin: auto auto(також відомий як margin: auto) буде працювати до центру його як горизонтально , так і вертикально, незалежно , якщо це inlineабо blockелемент.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

Зверніть увагу, що ширину / висоту не потрібно вказувати абсолютно, як у цьому прикладі jfiddle, який використовує розміри відносно області перегляду.

Незважаючи на те, що підтримка браузера для флексофіксів завжди є високою на час публікації, багато браузери все ще не підтримують її і не потребують префіксів постачальника. Для оновленої інформації про підтримку браузера зверніться до http://caniuse.com/flexbox .

Оновлення

Оскільки ця відповідь привернула трохи уваги, я також хотів би зазначити, що вам зовсім не потрібно вказувати, marginякщо ви використовуєте, display: flexі хочете зосереджувати всі елементи контейнера:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Ось найкраще рішення, яке я знайшов: http://jsfiddle.net/yWnZ2/446/ Працює в Chrome, Firefox, Safari, IE8-11 та Edge.

Якщо оголошена height( height: 1em, height: 50%і т.д.) , або це елемент , де браузер знає висоту ( img, svgабо canvas, наприклад), то все , що вам потрібно для вертикального центрування полягає в наступному:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Зазвичай ви хочете вказати widthабо max-widthтак, щоб вміст не розтягувався на всю довжину екрана / контейнера.

Якщо ви використовуєте це для модалу, який потрібно завжди зосереджувати у вікні перегляду, що перекриває інший вміст, position: fixed;замість цього використовуйте обидва елементи position: absolute. http://jsfiddle.net/yWnZ2/445/

Ось більш повна реєстрація: http://codepen.io/shshaw/pen/gEiDt

Редагувати: це 2020 рік, я б замість цього використовував flex box.

Оригінальна відповідь:

Html

<body>
  <div class="centered">
  </div>
</body>

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Я знаю, що це питання з 2012 року, але я знайшов найпростіший спосіб коли-небудь, і хотів поділитися.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

і CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Якщо ви знаєте висоту діва, який ви хочете відрегулювати, ви можете розмістити його абсолютно в його батьківському місці, а потім встановити topзначення 50%. Це покладе верхню частину дитини на 50% шляху вниз від свого батька, тобто занадто низько. Потягніть її назад, встановивши її margin-topна половину висоти. Отже, у вас є вертикальна середина дитини-діва, що сидить у вертикальній середині точки батьків - вертикально по центру!

Приклад:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Ці два рішення потребують лише двох вкладених елементів.
Перший - відносне та абсолютне позиціонування, якщо вміст статичний (ручний центр).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

або для дизайну рідини - для точного використання центру вмісту нижче наведено приклад:

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

Вам потрібно встановити "мінімальну висоту", якщо вміст перевищить 50% від висоти вікна. Ви також можете маніпулювати цією висотою за допомогою медіа-запиту для мобільних пристроїв та планшетних пристроїв. Але тільки якщо ви граєте з чуйним дизайном.

Я думаю, ви можете піти далі і використовувати простий скрипт JavaScript / JQuery для маніпулювання міні-висотою або фіксованою висотою, якщо є необхідність з якихось причин.

По-друге - якщо вміст є текучим u, ви також можете використовувати властивості css таблиці та комірки таблиці з вертикальним вирівнюванням та центром вирівнювання тексту:

/*in a wrapper*/  
display:table;   

і

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Працює і масштабується ідеально, часто використовується як чуйне рішення для веб-дизайну з макетами сітки та медіа-запитами, які маніпулюють шириною об'єкта.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

Я віддаю перевагу табличному рішенню для точного центрування контенту, але в деяких випадках відносне абсолютне позиціонування зробить кращу роботу, особливо якщо ми не хочемо зберігати точну пропорцію контенту.

Існує не один простий спосіб централізувати діл вертикально, який би робив трюк у будь-якій ситуації.

Однак існує маса способів зробити це залежно від ситуації.

Ось декілька з них:

• Встановіть верхню і нижню підкладку батьківського елемента, наприклад, набивання: 20px 0px 20px 0px
• Використовуйте таблицю, комірки таблиці центрируют її вміст вертикально
• Встановіть позицію батьківського елемента відносно і діви, які ви хочете, щоб вертикально було по центру і встановити його як верх: 50px; низ: 50px; наприклад

Ви також можете google для "css вертикального центрування"

змінна висота, поле верхнього і нижнього авто

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

змінна висота, поле верхнього і нижнього авто

Використання Flexbox:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Переглянути результат

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>