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

1367

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

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

Як я можу здійснювати divвертикальний центр у всіх основних браузерах, включаючи Internet Explorer 6?

css  cross-browser  alignment  vertical-alignment  centering 
— Бурак Ердем
джерело
25
@MarcoDemaio Чи не люди постійно нахмурилися tablesза макети тут?
— Chud37
14
@ Chud37: це залежить від того, що вам потрібно зробити, таблиці для компонування, як правило, не є універсальними і довго вводять код, за допомогою css ви можете легко змінити макет 2 cols на макет 3/4/5 sols тощо. Але в цьому випадку по-іншому, використовуючи десятки порад css-підказок для такого простого завдання, яке можна було б виконати за допомогою ідеальної таблиці крос-браузера, це як спроба увійти у ваш будинок через вікно, а не через двері.
— Марко Демайо
Якщо людей не хвилює старіша підтримка браузера: davidwalsh.name/css-vertical-center
— Karolis Šarapnickis
1
css-vertical-center.com є деякі рішення з інформацією про сумісність браузера
— EscapeNetscape
2
Ось безліч способів зробити це css-tricks.com/centering-css-complete-guide
— Майкл Юрін

Відповіді:

1374

Нижче представлено найкраще рішення, яке я могла побудувати, щоб вертикально та горизонтально розмістити центр з фіксованою шириною, гнучким вмістом висоти . Він був протестований і працює для останніх версій Firefox, Opera, Chrome і Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>
Розгорніть фрагмент

Перегляд робочого прикладу з динамічним вмістом

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

— Білбад
джерело
Без "абсолютного" зовнішнього DIV будь-який вміст сторінки, перш ніж він відсуне весь блок вниз. Це робить його більш незалежним від іншого вмісту сторінки.
— Білбад
9
.outer {position:absolute;width:100%;height:100%}не потрібно, вони тут просто для демонстрації. Все, що нам потрібно, це display:tableякщо хтось плутається як я.
— безгранний
Я помітив, що для уникнення прокрутки потрібно 99%. Що важливіше, це працює тільки з першими двома дівами, скажімо , тримаються .outerі middleі явно ігнорувати .innerі його стиль. Я не знаю, в чому сенс margin-left, margin-rightвстановлений для автоматичного, оскільки це не центрує елемент горизонтально ?? !!!
— користувач10089632
Видалення width: 100%;та додавання margin: 0 autoтакож .outerдозволяє змінювати ширину.
— рококо
@ user10089632 Ні, це не питання ширини чи висоти, а положення. top: 0; left 0;відсутня, принаймні, у Chrome, яка встановлює значення за замовчуванням на 1.
— Michał Woliński
280

Ще одного, якого я не бачу в списку:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Крос-браузер (включаючи Internet Explorer 8 - Internet Explorer 10 без злому!)
  • Реагує з відсотками та міні- / макс.
  • По центру незалежно від прокладки (без розміру коробки!)
  • heightповинні бути оголошені (див. Змінна висота )
  • Рекомендована установка overflow: autoдля запобігання переливу вмісту (див. Переповнення)

Джерело: Абсолютне горизонтальне та вертикальне центрування у CSS

— Ісела
джерело
7
Це працювало для мене, але мені потрібно було мати певну ширину та висоту в хромі чомусь
— Райан Кнелл
1
Дякую. Мені потрібно було виправити, де мені не потрібно було обчислювати висоту чи ширину px, і це спрацювало чудово.
— GFoley83
8
Відмінне рішення, тим більше, що вам не потрібен батьківський
— дів
1
Це робить розтяжку, якщо висота не зафіксована, крім цього: приємне рішення
— Барт Бург
Якщо у вас ширина і висота не на 100%, використовуйтеmargin: auto;
— Чарльз Л.
253

Найпростішим способом було б наступні 3 рядки CSS:

1) положення: відносне;

2) верх: 50%;

3) перетворення: translateY (-50%);

Далі наводиться ПРИКЛАД :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
Розгорніть фрагмент

— DrupalFever
джерело
4
Примітка: не працює правильно, якщо висота зовнішнього діва встановлена ​​на "min-height: 170px"
— Bart Burg
3
— Втручається
4
не працює, коли heightзовнішній divє 100%. Тоді працює лише з position: absolute;.
— Arch Linux Tux
1
Я знайшов це рішення в іншому місці спочатку, але додаткові кудо цієї конкретної відповіді для згадування про -webkit-transformваріант, зокрема, який мені знадобився для того, щоб цей метод працював у фантомі ... закінчився годин боротьби, тож дякую!
— drmrbrewer
2
Це найкраща відповідь. Це неймовірно просто, меси з найменшою кількістю існуючих робіт та функцій у всьому, що стосується IE9, який ніхто навіть більше не використовує. Давайте отримаємо цього хлопця ще кілька грошей!
— Нік Стіл
136

Насправді вам потрібно два діви для вертикального центрування. Див, що містить вміст, повинен мати ширину та висоту.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>
Розгорніть фрагмент

Ось результат

— Вадим Овчинников
джерело
4
це старий трюк ... верхній 50% і верхній запас мінус половина висоти для внутрішнього
— діла
34
це припустимо, що у вас є фіксована висота для діва. не працюють, коли div може змінити висоту.
— Andre Figueiredo
116

Тепер рішення flexbox - це дуже простий спосіб для сучасних браузерів, тому я рекомендую це для вас:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
Розгорніть фрагмент

— Сантош Халсе
джерело
1
Якщо у вас є navbar, ви можете налаштувати висоту, використовуючи height: calc(100% - 55px)будь-яку висоту navbar.
— Адріан
Я також повинен був зняти поля / підкладку з тіла
— Бен
Добре працює з float. Дякую.
— Амір А. Шабані
Зауважте, що це може бути дивно поведінкою у "новіших старих" браузерах мобільних сафарі. Рекомендоване використання замість висоти - це гнучка основа на .container клас
— Nine Magics
78

Редагувати 2020: використовуйте це лише в тому випадку, якщо вам потрібно підтримувати старі веб-переглядачі на зразок IE8 (що вам слід відмовитись 😉). Якщо ні, використовуйте flexbox.

Це найпростіший метод, який я знайшов, і я його постійно використовую ( jsFiddle demo тут )

Дякую Крісу Койєру з CSS Tricks за цю статтю .

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>
Розгорніть фрагмент

Підтримка починається з IE8.

— Армель Ларсьє
джерело
Відмовляючись у підтримці старих браузерів, рішенням для мене було не flexbox, а сітка. Мене трохи дратувало вміст центру в контейнері, який, коли він надто малий зростає, потрібен для показу смуги прокрутки, а центрированний вміст втрачав зону прокрутки за допомогою всіх інших методів. У контейнері я просто використовую: {display: grid; вирівняти елементи: центр; } Сподіваюся, що це комусь допоможе.
— tomasofen
63

Після безлічі досліджень я нарешті знайшов остаточне рішення. Він працює навіть для плаваючих елементів. Переглянути джерело 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
— ymakux
джерело
4
Це працює дуже добре, якщо ви пам’ятаєте, що елемент контейнера повинен мати неявну або явну висоту; jsfiddle.net/14kt53un Незначний прихильник для тих, хто відносно новий у CSS.
— Мартін Шутт
6
З усіх відповідей це найпростіший! Я сподіваюся, що інші теж побачать вашу відповідь! Дякую! До речі, 50%працював для мене (не -50%)
— The Codesee
Це було неймовірно. Після годин пошуку цей працював на мене. Мені довелося використовувати translateY (50%) Я впевнений, чому, але це спрацювало. У моєму випадку батько був створений AEM Forms Engine, і я можу контролювати лише певні дочірні елементи.
— тарекахф
36

Для центрування діва на сторінці перевірте посилання на скрипку .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Розгорніть фрагмент

Іншим варіантом є використання флексу, перевірте посилання на скрипку .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>
Розгорніть фрагмент

Інший варіант - використовувати перетворення CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Розгорніть фрагмент

— Нерроїдний
джерело
3
@ArmelLarcier Це неправильно. Відносні одиниці - це відсотки %, ems та rems. Абсолютні або фіксовані значення - це пікселі або точки. Що ви маєте на увазі, це "працює лише з оголошеною висотою". Ховевевер, хоча цей спосіб, описаний Моєсом, вимагає висоти, коли ви декларуєте його у відносних одиницях, відсоток найкращий, незалежно від того, скільки вмісту знаходиться в центрі DIV, DIV буде розширюватися вертикально, щоб відповідати його вмісту. У цьому і полягає краса цього методу. Інша гарна річ полягає в тому, що цей метод працює в IE8 / 9/10 у випадку, якщо комусь все-таки потрібно підтримувати ці браузери.
— Рікардо Зеа
@ricardozea Я не маю на увазі грати вперто, але сказати, що центрированний div розшириться вертикально, а залишок по вертикалі - неправильно. Спробуй це. Я знаю, коли я кажу, що висота повинна бути "фіксованою", що це не правильне слово. Це справді відносно свого батька. У будь-якому разі я думаю, що метод Кріса Коєра має більше сенсу, дивіться мою відповідь stackoverflow.com/a/21919578/1491212 Він сумісний з IE8 І працює на елемент без заданих розмірів.
— Армель Ларсьє
1
@ArmelLarcier Це все добре. Не помилився брат. Спробуйте: codepen.io/shshaw/pen/gEiDt - додайте абзаци до зеленого поля;]. Зрозуміло, він використовує Modernizr для досягнення ефекту, але в цілому це можливо. Я також бачив вашу відповідь та публікацію CSS-Tricks.com, але цей метод не робить мене щасливим, він використовує додаткову розмітку, і CSS занадто багатослівний. Я думаю, що найкращим рішенням є використання флексокса або transform: translate(-50%, -50%);техніку. Для IE8 я просто залиште його вгорі / в центрі вирівняним і продовжуйте рухатися далі.
— Рікардо Зеа
1
@ricardozea Добре, що в кодері, з яким ви пов’язані, використовується метод "display: table" та додаткова розмітка, тому я не здивований. У будь-якому разі, +1 до останнього речення.
— Армель Ларсьє
23

Найпростіше рішення нижче:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>
Розгорніть фрагмент

— Варша Дхадж
джерело
2
Дійсно, найпростіший поки що :) Хоча, мені довелося встановити стилі на зовнішнє розділення, а не на тіло.
— бабурао
21

На жаль - але не дивно - рішення складніше, ніж хотілося б. Крім того, на жаль, вам потрібно буде використовувати додаткові знаки навколо діва, який ви хочете вертикально по центру.

Для браузерів, що відповідають стандартам, таких як Mozilla, Opera, Safari тощо, вам потрібно встановити зовнішній div, який відображатиметься у вигляді таблиці, а внутрішній div повинен відображатися у вигляді комірки таблиці - який може бути вертикально центрований. Для Internet Explorer, необхідно розташувати внутрішній DIV абсолютно в межах зовнішнього DIV , а потім вказати вершину , як 50% . Наступні сторінки добре пояснюють цю методику і надають деякі зразки коду:

Існує також техніка виконання вертикального центрування за допомогою JavaScript. Вертикальне вирівнювання вмісту з JavaScript і CSS демонструє його.

— сайтів
джерело
20

Якщо хтось піклується лише про Internet Explorer 10 (і пізніші версії), використовуйте flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

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

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>
Розгорніть фрагмент

Підтримка Flexbox: http://caniuse.com/flexbox

— хоробрий
джерело
Android <4.4 не підтримує align-items: center;!
— Андре Фідлер
Насправді він підтримує вирівнювання елементів: центр; caniuse.com/#search=align-items
— t.mikael.d
@ t.mikael.d Можливо, ви захочете детальніше ознайомитися з цією таблицею. Для Android <4.4 він зазначає, що "підтримує лише стару специфікацію флексокса і не підтримує обгортку".
— Натан Осман
15

Сучасним способом центрувати елемент було б вертикально flexbox.

Потрібен батько, щоб визначити зріст, а дитину - по центру.

Наведений нижче приклад позначає поділ до центру вашого браузера. Що важливо (в моєму прикладі), щоб встановити , height: 100%щоб bodyі htmlпотім min-height: 100%до контейнера.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>
Розгорніть фрагмент

— Марвелл
джерело
14

Центрування лише вертикально

Якщо ви не переймаєтесь Internet Explorer 6 і 7, ви можете використовувати техніку, яка включає два контейнери.

Зовнішній контейнер:

  • повинні мати display: table;

Внутрішній контейнер:

  • повинні мати display: table-cell;
  • повинні мати vertical-align: middle;

Вікно вмісту:

  • повинні мати display: inline-block;

Ви можете додати будь-який вміст, який ви хочете, до вікна вмісту, не піклуючись про його ширину чи висоту!

Демонстрація:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>
Розгорніть фрагмент

Дивіться також цю скрипку !

Центрування по горизонталі та вертикалі

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

Внутрішній контейнер:

  • повинні мати text-align: center;

Вікно вмісту:

  • слід змінити горизонтальне вирівнювання тексту, наприклад, text-align: left;або text-align: right;, якщо ви не хочете, щоб текст був по центру

Демонстрація:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>
Розгорніть фрагмент

Дивіться також цю скрипку !

— Джон Slegers
джерело
13 

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>
Розгорніть фрагмент

Пов'язане: Центруйте зображення

— антелове
джерело
10

Це завжди куди я йду, коли мені потрібно повернутися до цього питання .

Для тих, хто не хоче робити стрибок:

  1. Вкажіть батьківський контейнер як position:relativeабо position:absolute.
  2. Вкажіть фіксовану висоту на дитячому контейнері.
  3. Встановіть position:absoluteі top:50%на дитячому контейнері переміщуйте верхню частину до середини батьківського.
  4. Встановіть верхню маржу: -yy, де yy - половина висоти дочірнього контейнера для компенсації предмета вгору.

Приклад цього в коді:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
— Нінкс
джерело
9

Використання flex властивості CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>
Розгорніть фрагмент

або за допомогою display: flex;іmargin: auto;

Показати фрагмент коду

показати текстовий центр

Показати фрагмент коду

Використовуючи відсоток (%) висоти та ширини.

Показати фрагмент коду

— Deepu Reghunath
джерело
8

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

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
— Санджіб Дебнат
джерело
1
Перетворення CSS можуть спричинити спотворення тексту та меж (коли математика призводить до дробових пікселів).
— Натан К
5

Для нових бажаючих спробуйте 

display: flex;
align-items: center;
justify-content: center;
— Усман I
джерело
1
Додайте фрагмент стека, який показує, як цей CSS-код вертикально вирівнює div.
— Єретична мавпа
це теж працює <div style="display:flex"><div style="margin:auto">Inner</div></div>
— idrisadetunmbi
Я зіткнувся з цим чудовим поясненням вирівнювання елементів та обґрунтування змісту. Обов’язково читайте: stackoverflow.com/questions/42613359/…
— Усман,
4

Відповідь Білбада працює лише з фіксованою шириною діва .inner. Це рішення працює на динамічну ширину, додаючи атрибут text-align: centerдо діла .outer.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>
Розгорніть фрагмент

— Руен
джерело
Цікаво! Я використовую майже ідентичну техніку! -> stackoverflow.com/questions/396145 / ...
— Джон Slegers
4

Три рядки коду, що використовують transformпрактично працює в сучасних браузерах та Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Я додаю цю відповідь, оскільки виявив деяку неповноту в попередній версії цієї відповіді (і Переповнення стека не дозволить мені просто коментувати).

  1. Відношення 'position' зіпсує стиль, якщо поточний div знаходиться в тілі і не має контейнера div. Однак здається, що "фіксований" працює, але він, очевидно, фіксує вміст у центрі вікна перегляду положення: відносне

  2. Також я використав цю стилізацію для центрування деяких накладених дівів і виявив, що в Mozilla всі елементи всередині цього перетвореного діва втратили нижню межу. Можливо, питання відтворення. Але додавання лише мінімальної прокладки до деяких із них виграло це правильно. Chrome і Internet Explorer (на диво) видавали коробки без потреби в прокладці мозила без внутрішніх прокладок мозила з накладками

— MandarK
джерело
3

Наступне посилання представляє простий спосіб зробити це лише з 3 рядків у вашому CSS:

Вертикальне вирівнювання будь-чого за допомогою всього 3 рядків CSS .

Кредити : Себастьян Екстрем .

Я знаю, що на питання вже є відповідь, але я побачив корисність у посиланні для його простоти.

— Хікаро
джерело
3

Не відповідає за сумісність браузера, але також згадуємо про нову Grid та не дуже нову функцію Flexbox.

Сітка

Від: Mozilla - Документація по сітці - Вирівняйте Div вертикально

Підтримка браузера: підтримка браузера Grid

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;
— ctekk
джерело
3

Я думаю, що надійне рішення для всіх браузерів без використання 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>

‣Demo: https://jsfiddle.net/6m640rpp/

— Мартін Ховеке
джерело
2

Я зробив це з цим (змінити ширину, висоту, верхню частину поля та край ліворуч відповідно):

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

<div class="wrapper"> -- Content -- </div>
— Нетюдкі
джерело
Це тільки добре, якщо ви знаєте ширину / висоту DIV, який намагаєтеся центрировать. Про це не
— задається
2

Вміст можна легко відцентрувати за допомогою 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;
}
— Махендра Лія
джерело
2

Особливо для батьківських диванів з відносною (невідомою) висотою, центруванням у невідоме рішенні мені чудово підходить. У статті є кілька справді приємних прикладів коду.

Він був протестований у 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

Просто зробіть це: додайте клас у своєму div:

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

І прочитайте цю статтю для пояснення. Примітка: Heightнеобхідно.

— Аншул
джерело
2

Нещодавно я з’ясував хитрість: вам потрібно скористатися 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>
Розгорніть фрагмент

— Мелхія
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.