У меня есть элемент div, который содержит текст, и я хочу выровнять содержимое этого центра по вертикали.
Вот мой стиль div:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>Вы можете попробовать этот базовый подход:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello World!
</div>Другой способ (пока не упомянутый здесь) - это использование Flexbox.
Просто добавьте следующий код в элемент контейнера:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}<div class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>Вы можете легко сделать это, добавив следующий фрагмент кода CSS:
display: table-cell;
vertical-align: middle;
Это означает, что ваш CSS, наконец, выглядит следующим образом:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}<div id="box">
Some text
</div>Для справки и для добавления более простого ответа:
Чистый CSS:
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Или как SASS/SCSS Mixin:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Использовать по:
.class-to-center {
@include vertical-align;
}
По сообщению блога Sebastian Ekström Вертикальное выравнивание всего лишь с тремя строками CSS:
Этот метод может привести к размытию элементов из-за того, что элемент размещен на "полупикселе". Решением для этого является установка родительского элемента для сохранения-3d. Пример:
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Мы живем в 2015 году и Flex Box поддерживается каждым крупным современным браузером.
Это будет способ создания сайтов здесь.
Узнайте об этом!
Все кредиты принадлежат владельцу этой ссылки @Sebastian Ekström Ссылка; прочитайте пожалуйста. См. Его в действии codepen. Прочитав эту статью, я также создал демонстрационную скрипту.
Только с тремя строками CSS (за исключением префиксов поставщиков) мы можем сделать это с помощью преобразования: translateY вертикально центрирует все, что захочет, даже если мы не знаем его высоты.
Преобразование свойства CSS обычно используется для элементов вращения и масштабирования, но с его функцией translateY мы можем теперь вертикально выравнивать элементы. Обычно это должно выполняться с абсолютным позиционированием или настройкой высоты линии, но для этого требуется либо знать высоту элемента, либо работать только с текстом одной строки и т.д.
Итак, для этого пишем:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Это все, что вам нужно. Это аналогичный метод для метода абсолютной позиции, но с ростом мы не должны устанавливать высоту элемента или свойства position на родительском объекте. Он работает прямо из коробки, даже в Internet Explorer 9!
Чтобы сделать его еще более простым, мы можем записать его как mixin с его префиксами поставщика.
Flexbox, которые были представлены в CSS3, являются решением:
/* Important */
section {
display: flex;
display: -webkit-flex;
}
p {
/* Key Part */
margin: auto;
}
/* Unimportant, coloring and UI */
section {
height: 200px;
width: 50%;
margin: auto;
border-radius: 20px;
border: 3px solid orange;
background-color: gold;
}
p {
text-align: center;
font-family: Calibri;
background-color: yellow;
border-radius: 20px;
padding: 15px;
}<section>
<p>
I'm a centered box!<br/>
Flexboxes are great!
</p>
</section>Гибкий подход
div {
width: 250px;
min-height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #123456;
margin-bottom: 5px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet.</span>
</div>
<div> Решение, принятое в качестве ответа, идеально подходит для использования line-height равной высоте div, но это решение не работает идеально, когда текст переносится ИЛИ в две строки.
Попробуйте это, если текст обернут или находится в нескольких строках внутри div.
#box
{
display: table-cell;
vertical-align: middle;
}
Для получения дополнительной информации см.:
Попробуйте это решение:
.EXTENDER {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.PADDER-CENTER {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>Вы можете использовать следующий фрагмент кода в качестве ссылки. Это работает как очарование для меня:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vertically Center Text</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.centered-text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body style="background:#3cedd5">
<div class="centered-text">
<h1>Yes, it my landing page</h1>
<h2>Under construction, coming soon!!!</h2>
</div>
</body>
</html>По-другому:
Не устанавливайте атрибут height div, вместо этого используйте padding: для достижения эффекта. Аналогично высоте строки, она работает только при наличии одной строки текста. Хотя, таким образом, если у вас есть больше контента, текст все равно будет по центру, но сам div будет немного больше.
Так что вместо того, чтобы идти с:
div {
height: 120px;
line-height: 120px;
}
Ты можешь сказать:
div {
padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}
Это установит верхний и нижний padding div на 60px, а левый и правый padding равны нулю, 60px высоту div 120 пикселей (плюс высота вашего шрифта), и поместив текст вертикально по центру в div.
Вы также можете использовать свойства ниже.
display: flex;
align-content: center;
justify-content : center;
Вот еще один вариант использования flexbox.
<div id="container">
<div class="child">
<span
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
nemo.</span
>
</div>
</div>
#container {
display: flex;
}
.child {
margin: auto;
}
Я не уверен, что кто-то прошел путь в writing-mode, но я думаю, что он решает проблему чисто и имеет широкую поддержку:
.vertical {
//border: 1px solid green;
writing-mode: vertical-lr;
text-align: center;
height: 100%;
width: 100%;
}
.horizontal {
//border: 1px solid blue;
display: inline-block;
writing-mode: horizontal-tb;
width: 100%;
text-align: center;
}
.content {
text-align: left;
display: inline-block;
border: 1px solid #e0e0e0;
padding: .5em 1em;
border-radius: 1em;
}<div class="vertical">
<div class="horizontal">
<div class="content">
I'm centered in the vertical and horizontal thing
</div>
</div>
</div>Для всех ваших потребностей в вертикальном выравнивании!
Объявите этот Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Затем включите его в свой элемент:
.element{
@include vertical-align();
}
Еще лучшая идея для этого. Вы тоже можете это сделать
body,
html {
height: 100%;
}
.parent {
white-space: nowrap;
height: 100%;
text-align: center;
}
.parent:after {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
.centered {
display: inline-block;
vertical-align: middle;
white-space: normal;
}<div class="parent">
<div class="centered">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>Для одной строки текста (или одного символа) вы можете использовать эту технику:
Его можно использовать, когда #box имеет нефиксированную относительную высоту в%.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Посмотрите живую демонстрацию в JsBin (проще редактировать CSS) или JsFiddle (проще изменить высоту результирующего кадра).
Если вы хотите поместить внутренний текст в HTML, а не в CSS, вам нужно обернуть текстовое содержимое в дополнительный встроенный элемент и отредактировать #box::after чтобы соответствовать ему. (И, конечно, content: свойство должно быть удалено.)
Например, <div id="box"><span>TextContent</span></div>. В этом случае #box::after следует заменить на #box span.
Для поддержки Internet Explorer 8 вы должны заменить :: на :
Простой и универсальный способ (в соответствии с табличным подходом Михилвоо):
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display: table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
Использование этого атрибута (или эквивалентного класса) в родительском теге работает даже для многих дочерних элементов для выравнивания:
<parent ctrv> <ch1/> <ch2/> </parent>
Попробуйте свойство transform:
#box {
height: 90px;
width: 270px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} <div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>Я просто хотел бы расширить ответ от Michielvoo, чтобы высвободить потребность в высоте строки и дыхании высоты div. Это просто упрощенная версия, например:
div {
width: 250px;
/* height: 100px;
line-height: 100px; */
text-align: center;
border: 1px solid #123456;
background-color: #bbbbff;
padding: 10px;
margin: 10px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div>
<span>All grown-ups were once children... but only few of them remember it</span>
</div>
<div>
<span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>Очень простое и мощное решение для вертикального выравнивания центра:
.outer-div {
height: 200px;
width: 200px;
text-align: center;
border: 1px solid #000;
}
.inner {
position: relative;
top: 50%;
transform: translateY(-50%);
color: red;
}<div class="outer-div">
<span class="inner">No data available</span>
</div>Попробуйте следующий код:
display: table-cell;
vertical-align: middle;
div {
height: 80%;
width: 100%;
text-align: center;
display: table-cell;
vertical-align: middle;
background: #4CAF50;
color: #fff;
font-size: 50px;
font-style: italic;
}<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s
</div>Следующий код поместит div в середину экрана независимо от размера экрана или div size:
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
} <html>
<head>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>Я видел предыдущие ответы, и они будут работать только для этой ширины экрана (не реагируют). Для реагирования вы должны использовать flex.
Пример:
div{ display:flex; align-item:center;}
Мне понадобилась строка щелчкообразных слонов, вертикально центрированная, но без использования таблицы, чтобы обойти некоторую сеть. 9 странность.
В конце концов я нашел самый красивый CSS (для моих нужд), и это отлично с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной...
div {
border: 1px dotted blue;
display: inline;
line-height: 100px;
height: 100px;
}
span {
border: 1px solid red;
display: inline-block;
line-height: normal;
vertical-align: middle;
}
.out {
border: 3px solid silver;
display: inline-block;
}<div class="out" onclick="alert(1)">
<div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
<div> <span>A lovely clickable option.</span> </div>
</div>
<div class="out" onclick="alert(2)">
<div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
<div> <span>Something charming to click on.</span> </div>
</div>Вы можете использовать метод позиционирования в CSS:
HTML:
<div class="relativediv">
<p>
Make me vertical align as center
</p>
</div>
CSS:
.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}
Надеюсь, вы тоже используете этот метод.
Установите его внутри button вместо div если вы не заботитесь о его небольшом визуальном 3D-эффекте.
#box
{
height: 120px;
width: 300px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
}<button Id="box" disabled>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>Абсолютное позиционирование и растяжение
Как и в случае с описанным выше методом, он начинается с установки позиционирования родительского и дочернего элементов как относительного и абсолютного соответственно. Оттуда вещи отличаются.
В приведенном ниже коде я снова использовал этот метод для центрирования дочернего элемента как по горизонтали, так и по вертикали, хотя этот метод можно использовать только для вертикального центрирования.
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Идея этого метода состоит в том, чтобы попытаться растянуть дочерний элемент до всех четырех ребер, установив верхнюю, нижнюю, правую и левую области равными 0. Поскольку наш дочерний элемент меньше, чем наши родительские элементы, он не может достичь всех четырех ребер.,
Однако в качестве поля на всех четырех сторонах устанавливается значение auto, равное разным полям, и наш дочерний элемент div отображается в центре родительского элемента div.
К сожалению, вышесказанное не будет работать в Internet Explorer 7 и ниже, и, как и в предыдущем методе, содержимое внутри дочернего элемента div может стать слишком большим, что приведет к его скрытию.
Это легко и очень коротко:
.block {
display: table-row;
vertical-align: middle;
}
.tile {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 500px;
height: 100px;
}<div class="body">
<span class="tile">
Hello middle world! :)
</span>
</div>.element{position: relative;top: 50%;transform: translateY(-50%);}
Добавьте этот небольшой код в свойство CSS вашего элемента. Это превосходно. Попробуйте!