Как центрировать div горизонтально и вертикально внутри контейнера с помощью flexbox. В приведенном ниже примере я хочу, чтобы каждое число находилось ниже друг друга (в строках), которые расположены по горизонтали.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Я думаю, вам нужно что-то вроде следующего.
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
См. демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/tFscL/
Ваши элементы .flex-item
должны быть блочными (div
вместо span
), если вы хотите, чтобы высота и верхнее/нижнее дополнение работали правильно.
Кроме того, на .row
установите ширину auto
вместо 100%
.
Ваши свойства .flex-container
прекрасны.
Если вы хотите, чтобы .row
располагался по вертикали в порт представления, назначьте 100% высоты html
и body
, а также обнулите поля body
.
Обратите внимание, что для .flex-container
требуется высота, чтобы увидеть эффект вертикального выравнивания, в противном случае контейнер вычисляет минимальную высоту, необходимую для помещения содержимого, что меньше высоты порта представления в этом примере.
Сноска:
Свойства flex-flow
, flex-direction
, flex-wrap
могли бы упростить реализацию этой конструкции. Я думаю, что контейнер .row
не нужен, если вы не хотите добавлять стиль вокруг элементов (фоновое изображение, границы и т.д.).
Полезный ресурс: http://demo.agektmr.com/flexbox/
Ниже приведены два общих централизованных решения.
Один для вертикально выровненных элементов гибкости (flex-direction: column
), а другой для выровненных по горизонтали элементов (flex-direction: row
).
В обоих случаях высота центрированных divs может быть переменной, undefined, неизвестно, что угодно. Высота центрированных divs не имеет значения.
Здесь HTML для обоих:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (за исключением декоративных стилей)
Когда элементы гибки располагаются вертикально:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
Когда элементы гибки располагаются горизонтально:
Откорректируйте правило flex-direction
из приведенного выше кода.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
Следовательно, вам всегда нужно применить display: flex
или display: inline-flex
к родительскому элементу, чтобы применить свойства flex к ребенку.
Для вертикального и/или горизонтального центра текста или другого содержимого, содержащегося в элементе flex, сделайте элемент (вложенным) гибким контейнером и повторите правила центрирования.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Подробнее здесь: Как вертикально выровнять текст внутри flexbox?
В качестве альтернативы вы можете применить margin: auto
к элементу содержимого элемента flex.
p { margin: auto; }
Ознакомьтесь с полями flex auto
здесь: Методы выравнивания элементов Flex (см. вставку № 56).
Когда контейнер flex имеет несколько строк (из-за обертывания), свойство align-content
будет необходимо для выравнивания по оси.
Из спецификации:
8.4. Линии гибких линий упаковки:
align-content
СвойствоСвойство
align-content
выравнивает линии гибких контейнеров в пределах гибкий контейнер, когда имеется дополнительное пространство в поперечной оси, аналогично какjustify-content
выравнивает отдельные элементы на основной оси. Обратите внимание: это свойство не влияет на однострочный контейнер flex.
Подробнее здесь: Как работает flex-wrap с выравниванием, выравниванием и выравниванием содержимого?
Flexbox поддерживается всеми основными браузерами за исключением IE < 10. В некоторых последних версиях браузера, таких как Safari 8 и IE10, требуется префиксы поставщика. Для быстрого добавления префиксов используйте Autoprefixer. Подробнее в этом ответе.
Для альтернативного решения центрирования с использованием таблицы CSS и свойств позиционирования см. этот ответ: https://stackoverflow.com/questions/11978231/vertically-center-two-elements-within-a-div
Добавить
.container {
display: flex;
justify-content: center;
align-items: center;
}
для элемента контейнера, который вы хотите центрировать. Документация: justify-content и align-items.
display: inline-flex
, но это было легко редактировать).
Не забывайте использовать важные атрибуты браузера:
align-items: center; →
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center; →
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
Вы можете прочитать эти две ссылки для лучшего понимания flex: http://css-tricks.com/almanac/properties/j/justify-content/ и http://ptb2.me/flexbox/
Удачи.
1 - Установите CSS на родительский div на display: flex;
2 - Установите CSS в родительский div в flex-direction: column;
Обратите внимание, что это сделает весь контент в этой строке div сверху вниз. Это будет работать лучше всего, если родительский div содержит только дочерний элемент и ничего больше.
3 - Установите CSS в родительском div в justify-content: center;
Вот пример того, как будет выглядеть CSS:
.parentDivClass {
дисплей: flex;
flex-direction: column;
justify-content: center;
}Код>
margin: auto
отлично работает с flexbox. Он централизуется вертикально и горизонтально.
html, body {
height: 100%;
max-height: 100%;
}
.flex-container {
display: flex;
height: 100%;
background-color: green;
}
.container {
display: flex;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS</title>
</head>
<body>
<div class="flex-container">
<div class="container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
</body>
</html>
div {
display: flex;
width: 200px;
height: 80px;
background-color: yellow;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-align: center; /* only important for multiple lines */
padding: 0 20px;
background-color: silver;
border: 2px solid blue;
}
<div>
<a href="#">text</a>
<a href="#">text with two lines</a>
</div>
diplay: flex;
для него контейнер и margin:auto;
для этого изделие работает идеально.
ПРИМЕЧАНИЕ. Вам необходимо настроить width
и height
чтобы увидеть эффект.
#container{
width: 100%; /*width needs to be setup*/
height: 150px; /*height needs to be setup*/
display: flex;
}
.item{
margin: auto; /*These will make the item in center*/
background-color: #CCC;
}
<div id="container">
<div class="item">CENTER</div>
</div>
display: flex;
align-items: center;
justify-content: center;
Использование CSS +
<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>
посмотрите ЗДЕСЬ