Вирівняйте вертикально за допомогою CSS 3

74

Чи є у CSS 3 спосіб вертикального вирівнювання елемента блоку? У вас є приклад? Дякую.

— Тхо
джерело

1

Це не CSS 3 шлях ...

— Тхо

2

@Так так. CSS 3 - це надмножина CSS 2.

— Шіме Відас

3

Гаразд, ви праві, я погоджуюсь із вашим твердженням ... але css3 надає щось простіше? Дякую.

— Тхо

1

Ще один приклад того, як CSS3 є надмірно розмовленим словом. CSS3 - це просто рівень CSS 3. Будь-який код CSS1 та CSS2.x також є дійсним CSS3, переборте його .

— BoltClock

6

slides.html5rocks.com/#flex-box-2

— Тхо

87

Нещодавно розглядав цю проблему і намагався:

HTML:

<body>
    <div id="my-div"></div>
</body>

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Ось скрипка:

http://jsfiddle.net/sTcp9/6/

Це навіть працює, коли використовується "width / height: auto", замість фіксованих розмірів. Перевірено на останніх версіях Firefox, Chrome та IE (* задишка *).

— Чарлі
джерело

3

Найкраще рішення. Не забудьте скористатися виявленням csstransforms Modernizr :-)

— myfreeweb

9

Будьте дуже обережні з таким підходом. Для перекладу елемента використовується графічний процесор, який в кінцевому підсумку обчислює пікселі як плаваючі крапки. Таким чином, ви можете в кінцевому підсумку перемістити об'єкт із значенням пікселя та отримати розмиті результати. Ознайомтесь із цією статтею для більш детальної інформації: martinkool.com/post/27618832225/beware-of-half-pixels-in-css

— Laith

Щоб уникнути розмитих результатів через проблему " півпікселя ", спробуйте додати transform-style: preserve-3d;до батьківського елемента (джерело: zerosixthree.se/… ).

— nickb

12

здається, w3.org подобається вашому методу. вони розмістили це на своєму сайті w3.org/Style/Examples/007/center.en.html#vertical Хороше рішення товариш :)

— trve.fa7ad

1

@ n611x007 не потрібно встановлювати лівий стиль вертикальним вирівнюванням. встановивши ліворуч і translateX вирівняє вміст горизонтально, а встановивши верх і translateY вирівняє вміст вертикально.

— 1,21 гігават

34

Примітка: Цей приклад використовує чорнову версію модуля гнучкого розміщення коробки . Його замінила несумісна сучасна специфікація.

Відцентруйте дочірні елементи поля div за допомогою властивостей box-align та box-pack разом.

Приклад:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

— Крашалот
джерело

1

Це те, що я шукав: нові доповнення до CSS (тобто CSS3), які роблять це простішим, ніж усі старі злому CSS1 / 2. Дякую.

— thaddeusmt

34

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

<style>
  .container {
    display: flex;
    align-items: center; /* Vertical align */
    justify-content: center; /* Horizontal align */
  }
</style>

<div class="container">
  <div class="block"></div>
</div>

Центри blockвсередині containerвертикально (і горизонтально).

Підтримка браузера: http://caniuse.com/flexbox

— Андрій Немченко
джерело

9

кілька способів:

1. Абсолютне позиціонування - для роботи потрібно мати задекларовану висоту:

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

* 2. Використовуйте дисплей: таблиця http://jsfiddle.net/B7CpL/2/ *

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}

Більш детальне керівництво за допомогою display: table

http://css-tricks.com/vertically-center-multi-lined-text/

— HandiworkNYC.com
джерело

3

Існує простий спосіб вирівняти div по вертикалі та горизонталі в css.

Просто встановіть висоту вашого div і застосуйте цей стиль

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Сподіваюся, це допомогло.

— Едуард Комбо
джерело

Це вимагає розташування батьківського (тобто position: relative).

— alxs

2

Я завжди використовую підручник з цієї статті для центрування речей. Це чудово

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основними правилами є:

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

— Пане Нео
джерело

1

Ви можете використовувати translateY (-50%), щоб просто встановити вісь Y. Встановити стиль перетворення: зберегти-3d; щоб запобігти розмитості тексту на півпіксельних значеннях і обов’язково включайте префікси постачальника для перетворення та стилю перетворення.

— 1,21 гігават

Знайшли цю відповідь, знайшовши приклад центру w3 .. потім знайшли приклад центру w3, знайшовши цю відповідь. Excel сказав, що це найкраще; Циркулярне посилання виявлено!

— panhandel

0

Спробуйте це також чудово працювати:

html:

   <body>
    <div id="my-div"></div>
   </body>

css:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}

— Mr.G
джерело

-1

Ви можете вирівняти по вертикалі, встановивши елемент для відображення: inline-block, а потім встановивши вертикальне вирівнювання: посередині;

— Дейв
джерело

1

Насправді це не за горами. Ви можете додати інший елемент перед цим (або використовувати a: before psuedo елемент на батьківському). Тоді нехай цей новий елемент має 100% висоту та 1px ширину та поле зліва: -1px. Потім надайте йому властивість inline-block та vertical-align: middle css. Тоді ви повинні переконатися, що батьківський елемент має визначену висоту.

— Artvader