Вертикально div по центру: Центрирование горизонтальное и вертикальное

Как выровнять DIV по вертикали и горизонтали по центру

Может ли кто-нибудь помочь мне заставить div id «loader» плавать в центре div class «Window». Спасибо.

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

UPDATE* мне нужно центрировать его в абсолютной середине блока. Допустим, класс «Window» был высотой 400 пикселей. Как мне заставить «загрузчик» плавать в центре (height/width) этого?

css

Поделиться

Источник

Joe    

22 февраля 2012 в 17:19

5 ответов

• Как выровнять небольшое изображение по центру с текстом в центре как по горизонтали, так и по вертикали?

  У меня есть div, где я пытаюсь выровнять текст и изображение по центру как по вертикали, так и по горизонтали. Так что для горизонтального я дал text-align: center; , для вертикального мне не хватает, потому что размер изображения и фактическое изображение немного отличаются, это формат png, так…

• Выровняйте изображение по центру как по вертикали, так и по горизонтали

  У меня есть список изображений, которые мне нужно выровнять по центру как по вертикали, так и по горизонтали. Как выровнять изображения в центре их соответствующего li как по горизонтали, так и по вертикали с помощью jquery? демо-версия на codepen.io . html: <ul id=snap-list> <li…

7

Примените следующие CSS к «loader»:

• положение: относительное
• топ: 50%
• маржа: -{E}px auto auto auto

где {E} — половина высоты «loader»

Надеюсь, это поможет.

Поделиться

SenorAmor    

22 февраля 2012 в 17:29

3

#someid.Window{
   // give this some width
   width: 100%
}

#loader{
    // give width and margin auto on the sides
    width: 100px;
    margin: 0 auto;
}

Поделиться

driangle    

22 февраля 2012 в 17:21

0

Добавьте это в свой css:

#loader {
  width: 123px;
  margin:0 auto;
}

Это позволит автоматически рассчитать левое и правое поля.

Поделиться

Bruno Silva    

22 февраля 2012 в 17:21

0

http://jsfiddle.net/sfKR2/

#someid {
    width:200px;
    height:200px;
}
#loader {
    position: relative;
    height:80px;
    width: 80px;
    top: 50%;
    margin-top: -40px; /* half of the height */
    margin-left: auto;
    margin-right: auto;
}

​

Поделиться

Fabian    

22 февраля 2012 в 17:22

0

напиши это:

.window{
    height:400px;
    width:400px;
    background:red;
    vertical-align:middle;
    line-height:400px;
    text-align:center;
}
#loader{
    width:20px;
    height:20px;
    background:green;
    display:inline-block;
    vertical-align:middle;
}

Проверьте это http://jsfiddle.net/dxPfz/

Поделиться

sandeep    

22 февраля 2012 в 17:33

Похожие вопросы:

Как вы выравниваете div по горизонтали и вертикали?

Я хотел бы горизонтально и вертикально выровнять следующий div по центру страницы. Мне удалось выровнять его по горизонтали к центру, но не по вертикали. Как я могу это сделать?…

Как выровнять текст в окне по вертикали и горизонтали?

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

CSS: как выровнять содержание текста по горизонтали-по центру и по вертикали-по центру?

как я могу выровнять текст внутри div, в horizonally-по центру и по вертикали-по центру? <div style=height: 300px;> <p>Envision various details for your big day with help from our photo…

Как выровнять небольшое изображение по центру с текстом в центре как по горизонтали, так и по вертикали?

У меня есть div, где я пытаюсь выровнять текст и изображение по центру как по вертикали, так и по горизонтали. Так что для горизонтального я дал text-align: center; , для вертикального мне не…

Выровняйте изображение по центру как по вертикали, так и по горизонтали

У меня есть список изображений, которые мне нужно выровнять по центру как по вертикали, так и по горизонтали. Как выровнять изображения в центре их соответствующего li как по горизонтали, так и по…

Как выровнять текст по центру в div

Я хотел бы выровнять текст по центру как по вертикали, так и по горизонтали внутри этого div. Таким образом, он имеет равное заполнение сверху и снизу. Как мне это сделать с моим текущим кодом? мой…

После выравнивания div по горизонтали и вертикали по центру

Я видел много вопросов о том, как выровнять div по горизонтали и вертикали по центру , и я также получил ответ. Код, который я получил: Html- <div class=outer> <div class=middle> <div…

Выровняйте div по горизонтали и вертикали по центру страницы (отзывчиво)

У меня есть div для формы входа в систему. Я хочу выровнять div по горизонтали и вертикали по центру во всех устройствах. Любая помощь будет оценена по достоинству

Как выровнять кнопку по горизонтали и вертикали в документе?

Я хочу выровнять кнопку по горизонтали и вертикали в документе, теперь я хочу выровнять по горизонтали, но я не могу определить, как выровнять по вертикали? На рисунке ниже кнопка выровнять по…

Как выровнять текст внутри элемента <div> по горизонтали?

Как выровнять текст внутри div по центру по вертикали? У меня есть элемент div внутри моей страницы html, где высота div-это размер экрана, а текст внутри этого div должен быть в центре. Я…

Как вертикальное выравнивание элементов в div?

По умолчанию h2 является элементом блока и будет отображаться в строке после первого img, что приведет к появлению второго img в строке после блока.

Чтобы это не происходило, вы можете установить h2 для поведения встроенного потока:

 #header > h2 { display: inline; }
  

Что касается абсолютного позиционирования img внутри div , вам необходимо установить содержащий div в «известном размере», прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию — положение: относительная у меня работает:

 #header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
  

Если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимально необходимые атрибуты для достижения желаемого эффекта.

UPDATE:

Вот полный пример, который работает на Firefox 3:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h2 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div>
            <img src="#" alt="Image 1" />
            <h2>Header</h2>
            <img src="#" alt="Image 2" 
                 />
        </div>
    </body>
</html>
  

Bootstrap 4 центрирование по вертикали и горизонтали

обновить 2018 — Bootstrap 4.0.0

здесь не нужно на дополнительный CSS. То, что уже включено в Bootstrap будет работать. Убедитесь, что контейнер(ы) формы полная высота. Bootstrap 4 теперь имеет h-100 класс для высоты 100%…

вертикальная центр:

<div>
  <div>
    <form>
      <div>
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" placeholder="Example input">
      </div>
      <div>
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

высота контейнера с элементом (- АМИ) к центру должна быть 100%

(или независимо от желаемой высоты относительно центрированного элемента)

Примечание: при использовании height:100% (процент высоты) на любой элемент, элемент принимает в высоту его контейнер. В современных браузерах ВХ блоки height:100vh; может использоваться вместо % чтобы получить нужную высоту.

горизонтального центра:

• text-center в центр display:inline элементы и содержания
• mx-auto для центрирования внутри гибкого элемента
• offset-* или mx-auto можно столбцы-центр (.col-)
• justify-content-center to столбцы-центр (col-*) внутри row

вертикальное выравнивание центра в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная входная группа

Отцентрировать блок по горизонтали и вертикали

Горизонтальное и вертикальное выравнивание блока распространенная задача. Опишу наиболее простые и частоипользуемые способы.

Отцентировать по горизонтали

Способ 1
Через margin: auto;, задав ширину < ширины родителя.

.center {
    margin: auto;
    width: 50%;
}

Способ 2
Через margin: auto; display: table;. Преимущество второго способа — ширина таблицы может быть динамической.

.center {
    margin: auto;
    display: table;
}

Отцентировать по вертикали

Способ 1
Пользуясь особенностями таблиц можно легко отцентровать по вертикали и горизонтали блок произвольной ширины и высоты.

<div>
  <p>Content here</p>
</div>

.vcenter {
    display: table;
}
.vcenter p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
}

Или так:

<div>Content here</div>
.vcenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
}

Но при этом варианте родительский блок получит табличный алгоритм вычисления ширины (иметь ширину содержимого), а это не всегда желательно. Чтобы растянуть блок, нужно указать ширину явно, например width: 300px. В данном примере указать в процентах не получится, т.к. ячейка есть, а родительской таблицы — нет.

Способ 2
Второй вариант вертикального выравнивания базурется на использовании трансформаций:

<main>
    <div>Content centered vertically</div>  
</main>

main { position: relative
main div {
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
}

Способ 3
Использовать возможности flexbox:

<div>Centered content with flexbox</div>
.vcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

Способ 4
Можно задать контейнеру раскладку флексбокса, а дочернему флекс-элементу margin: auto:

<div><div>Centered text</div></div>
.container { display: flex; }
.message { margin: auto; }

В этом случае элемент уменьшит свой размер под содержимое и отцентруется по вертикали и горизонтали. Если элементов будет несколько, то между ними будут равномерные отступы (похожие на justify-content: space-around).

В заключение: сборник решений от CSS Tricks.

Выравнивание блока HTML (вертикально и горизонтально)

Центровка элемента — одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы.

Горизонтальная центровка.

С центровкой текста все ясно:

HTML tag center

Раньше встречалось использование тега <center>, который является валидным только в transitional doctype. Считается, что его использование аналогично действию text-align: center. Однако это не так. Им можно центрировать не только текст, но и контейнер вроде div.

Здесь я отцентрировал по горизонтали с помощью <center> контейнер с фиксированной шириной. При этом, если убрать <center> и дописать в стили <body> прилегание текста по центру, то эффекта центровки контейнера мы не получим. Обратите внимание, что на рисунке не только сам контейнер центрован, но и текст в нем также центрован.

Код примера в HTML

<html>
<head>
<style>
#sample {
    width: 200px;    
    background: #8F8;
}
</style>
</head>
<body>
    <center>
        <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
        when an unknown printer took a galley of type and scrambled it to make a type
        specimen book.
        </div>
    </center>

</body>
</html>

Margin: auto;

Чтобы стилями добиться эффекта подобного <center>, можно добавить специфический margin. Тогда тег <center> можно убрать.

#sample {
    width: 200px;    
    background: #8F8;
    /* center tag */
    margin: 0 auto;
    text-align: center;
}

Центровка таблицей.

Кто любит табличную магию, те могут применять центровку таблицей. Результат аналогичен <center>.

Код HTML

<html>
<head>
<style>
#sample {
    width: 200px;    
    background: #8F8;
}
</style>
</head>
<body>
    <table><tr><td align=»center»>
        <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
        when an unknown printer took a galley of type and scrambled it to make a type
        specimen book.
        </div>
    </td></tr></table>
</body>
</html>

Вертикальная центровка

Раз уж мы заговорили о настоящей табличной магии, то нет ничего сложного центровать контейнер в таблице по вертикали.

В таблице из прошлого примера добавим центровку по вертикали (valign=center»). Табличку я подкрасил, чтобы визуализировать её границы.

HTML код для табличной центровки контейнера по вертикали.

<html>
<head>
<style>
#sample {
    width: 200px;    
    background: #8F8;
}
table {
    background: #88F;
}
</style>
</head>
<body>
    <table><tr><td align=»center» valign=center»>
        <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
        when an unknown printer took a galley of type and scrambled it to make a type
        specimen book.
        </div>
    </td></tr></table>
</body>
</html>

Центровка с помощью CSS свойства vertical-align.

Vertical-align относиться к свойству прилегания строки, потому наш контейнер нужно сначала подготовить. Вместо дефолтного display: block нужно установить block-inline. Добавим внешний контейнер, который имитирует строку, где выравнивается наш тестовый блок.

Вроде бы все есть, но почему то центровки по вертикали не происходит. Чудо не случилось :). Все потому, что middle должен вычисляться относительно других элементов строки, а их нет.

HTML код примера выше.

<html>
<head>
<style>
#line {
/* контейнер имитирует строку 250 точек высотой */
    background-color: #88F;
    height: 250px;
    line-height: 250px;
}
#sample {
/* тестовый контейнер */
    width: 150px;    
    background-color: #8F8;
    line-height: 18px;
    vertical-align: middle;
    display: inline-block;
}

</style>
</head>
<body>
    <div>
        <div>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
        </div>
    </div>
</body>
</html>

Чтобы пример заработал достаточно добавить в #line  неразрывного пробела — &nbsp;. Это также могут быть другие inline, block-inline контейнеры, вроде #sample.

Теперь все получилось, как задумано. Контейнер #sample занял положение по центру строки.

<body>
    <div>
        <div>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
        </div>
        &nbsp;
    </div>
</body>

Вот такая маленькая хитрость. 🙂

Css div по центру по горизонтали

Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких CSS-трюков выровнять div по центру, как по горизонтали, так и по вертикали. Также мы расскажем, как произвести центрирование по всей странице либо в отдельно взятом div-элементе .

Простое центрирование DIV-элемента на странице

Этот метод будет отлично работать во всех браузерах.

Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

Центрируем DIV внутри DIV-элемента старым способом

Этот метод div выравнивания по центру будет работать во всех браузерах.

Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина ( width ).

Центрируем DIV внутри DIV-элемента с помощью inline-block

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

Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока ( inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .

Центрируем DIV внутри DIV-элемента горизонтально и вертикально

Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.

У внутреннего div-элемента должна быть указана ширина ( width ) и высота ( height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

Центрируем DIV по нижней границе страницы

Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .

Центрируем DIV на странице вертикально и горизонтально

Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.

У div-элемента должна быть установлена ширина ( width ) и высота ( height ).

Делаем адаптивное центрирование DIV-элемента на странице

Здесь для выравнивания div по центру средствами CSS мы делаем ширину div-элемента адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.

У центрированного div-элемента должно быть установлено свойство max-width .

Центрируем DIV внутри элемента с помощью свойств внутреннего блока

Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

У внутреннего div должно быть установлено свойство max-width .

Центрируем два адаптивных div-элемента рядом друг с другом

Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

DIV-элемент, центрированный при помощи Flexbox

Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .

Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

Данная публикация представляет собой перевод статьи « THE COMPLETE GUIDE TO CENTERING A DIV » , подготовленной дружной командой проекта Интернет-технологии.ру

В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

margin: auto

Блок по горизонтали центрируется margin: auto :

В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

Вертикальное

Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

Есть три основных решения.

position:absolute + margin

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна line-height .

Приподнимем элемент на пол-высоты при помощи margin-top :

При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

Одна строка: line-height

Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо.

Таблица с vertical-align

У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

В таблицах свойство vertical-align указывает расположение содержимого ячейки.

Его возможные значения:

baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

Этот способ замечателен тем, что он не требует знания высоты элементов.

Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать width явно, например: 300px :

Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

Центрирование в строке с vertical-align

Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:

Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

Работает во всех браузерах и IE8+.

Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

Центрирование с vertical-align без таблиц

Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

• Перед центрируемым элементом помещается вспомогательный инлайн-блок before , занимающий всю возможную высоту.
• Центрируемый блок выровнен по его середине.

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

Это происходит потому, что центрируется весь текст, а перед inner находится пробел, который занимает место.

Убрать лишний пробел между div и началом inner , будет

Центрирование с использованием модели flexbox

Данный метод поддерживается всеми современными браузерами.

• Не требуется знания высоты центрируемого элемента.
• CSS чистый, короткий и не требует дополнительных элементов.

• Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Итого

Обобщим решения, которые обсуждались в этой статье.

Для горизонтального центрирования:

• text-align: center – центрирует инлайн-элементы в блоке.
• margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента известен, а родителя – нет

Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

Если нужно отцентрировать одну строку в блоке, высота которого известна

Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

Высота родителя известна, а центрируемого элемента – нет.

Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

Высота обоих элементов неизвестна.

1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.

1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
2. Решение с использованием flexbox.

Смотрите также указатель всех приёмов работы.

Центрирование

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

• Выравнивание по вертикали в уровне 3
• Выравнивание по вертикали и горизонтали в уровне 3
• Выравнивание в области просмотра в уровне 3

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано:

Вертикальное центрирование

Пример, приведенный ниже, демонстрирует центрирование абзаца внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац, который центрирован вертикально в окне браузера, потому что находится внутри блока, позиционированного абсолютно и по высоте окна.

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

таблица стилей выглядит так:

Основные правила:

1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Created 5 May 2001;
Last updated Вт 05 ноя 2019 19:12:56

Как вертикально центрировать

Как вертикально центрировать

  

  
    
  
  
    

      

        

          

            Как центрировать HTML-тег по вертикали
          
          

            Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.