Я хочу центрировать div, который добавляется внутри другого div.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Это CSS, который я использую в настоящее время.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Как вы можете видеть, подход, который я использую сейчас, зависит от значений ширины и высоты innerDiv
. Если изменяется ширина/высота, мне придется изменить значения margin-top
и margin-left
. Там есть общее решение, которое я могу использовать для центрирования innerDiv
всегда независимо от его размера?
Я понял, что использование margin:auto
может горизонтально привязывать внутреннюю область к середине. Но что относительно вертикального аллигмента среднего?
Работа по вертикальному выравниванию работает, но вы должны использовать table-cell
для своего родительского элемента и inline-block
для дочернего элемента.
Это решение не будет работать в IE6 и 7.
Ваш более безопасный способ пойти для них.
Но поскольку вы отметили свой вопрос с помощью CSS3 и HTML5, я думал, что вы не против использовать современное решение.
Классическое решение (раскладка таблицы)
Это был мой оригинальный ответ. Он по-прежнему отлично работает и является решением с самой широкой поддержкой. Table-layout будет влиять на производительность рендеринга, поэтому я бы предложил использовать одно из более современных решений.
Протестировано в:
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Современное решение (преобразование)
Поскольку преобразования довольно хорошо поддерживаются сейчас, есть более простой способ сделать это.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
мое любимое современное решение (flexbox)
Я начал использовать flexbox все больше и больше его также хорошо поддерживали сейчас Его гораздо проще.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Дополнительные примеры и возможности: Сравните все методы на одной странице
Другим способом достижения этого горизонтального и вертикального центрирования является:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
(Ссылка)
bottom: 0; left: 0;
получает внутренний div, застрявший на дне родителя (Chrome 33, в любом случае).
.search-header{ margin:auto; top:0px; bottom:0px; right:0px; }
поиска это было .search-header{ margin:auto; top:0px; bottom:0px; right:0px; }
нет 'left', назначенного для продолжения порядка и позиции предыдущего <div>
Внешнее Div должно установить его position
на relative
или fixed
, а Внутреннее Div должно установить его position
на absolute
, top
и left
на 50%
и применить transform: translate(-50%, -50%)
.
div.cn {
position: relative;
width: 200px;
height: 200px;
background: gray;
text-align: center;
}
div.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="cn">
<div class="inner">
test
</div>
</div>
Протестировано:
Вертикальное выравнивание всего лишь с тремя строками CSS
HTML
<div class="parent-of-element">
<div class="element">
<p>Hello</p>
</div>
</div>
Простейшие
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
CSS
.parent-of-element {
position: relative;
height: 500px;
/* or height: 73.61% */
/* or height: 35vh */
/* or height: ANY HEIGHT */
}
.element {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Согласно shouldiprefix, это единственные префиксы, которые вам нужны
Вы также можете использовать% в качестве значения для свойства height для элемента .parent-of-element, если родительский элемент имеет высоту или некоторый контент, который расширяет свой вертикальный размер.
Вместо того, чтобы завязать себя узлом с жестким для записи и трудноподдерживаемым CSS (для этого также нужна тщательная проверка в браузере!) Мне гораздо лучше отказаться от CSS и использовать вместо этого удивительно простой HTML 1.0:
<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" id="innerDiv">
</td>
</tr>
</table>
Это обеспечивает все, что требуется оригинальному плакату, и является надежным и удобным.
Я лично предпочитаю трюк использования скрытого псевдоэлемента для охвата всей высоты внешнего контейнера и вертикального выравнивания его с другим контентом. У Криса Койера хорошая статья о технике. http://css-tricks.com/centering-in-the-unknown/ Огромным преимуществом этого является масштабируемость. Вам не нужно знать высоту контента или беспокоиться о его нарастании/сокращении. Это решение масштабируется:).
Вот сценарий со всем CSS, который вам понадобится, и рабочий пример. http://jsfiddle.net/m5sLze0d/
.center:before {
content: ""; /* Adding Extra Space Above Element */
display: inline-block;
height: 100%;
margin-right: -0.3em;
vertical-align: middle;
}
.center_element {
display:inline-block;
float:none;
vertical-align:middle;
white-space:normal;
text-align:left;
}
Просто установите контейнер для display:table
а затем внутренние элементы для display:table-cell
. Задайте height
на контейнере, а затем установите vertical-align:middle
по внутренним элементам. Это имеет широкую совместимость в отношении дней IE9.
Просто отметьте, что вертикальное выравнивание будет зависеть от высоты родительского контейнера.
.cn
{
display:table;
height:80px;
background-color:#555;
}
.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
</div>
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background:grey;
display:flex;
justify-content:center;
align-items:center;
}
#innerDiv{
background:cyan;
width: 284px;
height: 290px;
}
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>
, вы можете сделать это, просто добавив стиль CSS, упомянутый выше. Всего наилучшего. для запроса написать комментарий
Если ваш height
не установлен (авто); вы можете дать внутреннему div некоторую прокладку (верхнюю и нижнюю), чтобы сделать ее вертикально центральной:
<div>
<div style="padding-top:20px;padding-bottom:20px">
<!--content-->
</div>
</div>
введите здесь описание изображения 100% он работает
.div1{
height: 300px;
background: red;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.div2{
background: green;
height: 100px;
width: 100%;
}
<div class="div1">
<div class="div2">
sdfd
</div>
</div>
Если вы все еще не понимаете, прочитав чудесные ответы, приведенные выше.
Вот два простых примера того, как вы можете это достичь.
.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
display: inline-block;
text-align: left;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Center align a div using "<strong>display: table-cell</strong>"
</div>
</div>
.wrapper {
display: flex;
justify-content: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
align-self: center;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Centering a div using "<strong>display: flex</strong>"
</div>
</div>
Примечание. Перед использованием вышеупомянутых реализаций проверьте совместимость браузера дисплея: table-cell и flex.
Fiddle Link < http://jsfiddle.net/dGHFV/2515/ >
Попробуйте
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid red;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
border:1px solid green;
}
Это работает для меня. Можно определить ширину и высоту внешнего div.
Здесь код:
.outer {
position: relative;
text-align: center;
width: 100%;
height: 150px; // Any height is allowed, also in %.
background: gray;
}
.outer > div:first-child {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="outer">
<div class="inner">
Put here your text or div content!
</div>
</div>
Я использую следующее решение с года, он также работает с IE 7 и 8.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
Это вернется к IE6!
<!DOCTYPE html>
требуется также для IE6!
[также будет принудительно установлен режим IE6 по умолчанию].
(разумеется, раскраска ящика предназначена только для демонстрационных целей)
#outer{
width: 205px;
height: 205px;
margin: auto;
text-align: center;
}
#inner{
text-align: left;
vertical-align: middle;
width: 120px;
height: 120px;
display: inline-block;
}
#center{
height: 100%; width:0px;
vertical-align: middle;
display: inline-block;
}
div {background: rgba(0,128,255,.6)}
<div id=outer>
<div id=center></div><div id=inner> The inner DIV
</div>
</div>
Вы можете центрировать div вертикально и горизонтально в CSS с помощью flex;
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
margin:0 auto;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#innerDiv{
width: 284px;
height: 290px;
border:1px solid #eee;
}
И вторая следующая:
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
}
#innerDiv{
max-width: 300px;
height: 200px;
background-color: blue;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
border:1px solid #000;
border-radius:4px;
}
И получившийся HTML:
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
попробуйте выровнять внутренний элемент следующим образом:
top: 0;
bottom: 0;
margin: auto;
display: table;
и, конечно же:
position: absolute;
Вы можете сделать это с помощью простого блока javascript (jQuery).
CSS
#outerDiv{
height:100%;
}
Javascript
<script type="text/javascript">
$(document).ready(function () {
$("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
});
</script>
для innerdiv, которые не указывают его значение высоты, нет чистого решения css, чтобы сделать его вертикально центрированным. В javascript-решении может быть получена offsetdivight, а затем вычисляется стиль .marginTop.
Центрировать выравнивание по вертикали и по горизонтали:
#parentDiv{
display:table;
text-align:center;
}
#child {
display:table-cell;
vertical-align:middle;
}
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background-color: lightgrey;
}
#innerDiv{
width: 284px;
height: 290px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
background-color: grey;
}
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
выравнивание текста по родительскому элементу, отображение встроенного блока на дочернем элементе. Это сосредоточит все самое лучшее. Я считаю, что его называют "блочным поплавком".
<div class="outer">
<div class="inner"> some content </div>
</div><!-- end outer -->
<style>
div.outer{
width: 100%;
text-align: center;
}
div.inner{
display: inline-block;
text-align: left
}
</style>
Это тоже хорошая альтернатива для плавания, удачи!
Я знаю, что вопрос был создан год назад... В любом случае спасибо CSS3, вы можете легко вертикально выровнять div в div (пример там http://jsfiddle.net/mcSfe/98/)
<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>
div
{
display:-moz-box;
-moz-box-align:center;
}