Flexbox:水平和垂直居中

如何使用flexbox在容器内水平和垂直居中div。在下面的示例中,我希望每个数字都彼此相邻(按行),并水平居中。

.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>

你的.flex-item元素应该是块级(div而非span)如果你想要的高度和顶部/底部填充,以正常工作。

另外,在上.row,将宽度设置为auto而不是100%

您的.flex-container属性很好。

如果您希望.row垂直居中于视口中,请为html和分配100%的高度body,然后将页body边距清零。

请注意,.flex-container需要一个高度才能看到垂直对齐效果,否则,容器会计算出包围内容所需的最小高度,该最小高度小于此示例中的视口高度。

flex-flowflex-directionflex-wrap性能会犯这样的设计更容易实现。我认为.row不需要容器,除非您要在元素周围添加一些样式(背景图像,边框等)。

以上是 Flexbox:水平和垂直居中 的全部内容, 来源链接: utcz.com/qa/421476.html

回到顶部