在拉伸对齐的 flexbox 容器中垂直居中 div
Center div vertically in flexbox container with stretch alignment
我需要在 flex 容器中居中 div 并保持整个容器的高度 div。显然,我有 align-items:stretch
用于保持高度或 align-items:center
用于居中块。 Flexbox 模型在保持父容器高度的情况下使 div 居中的好方法是什么?
JSFiddle:http://jsfiddle.net/symb8s02/
您可以用 span
元素包裹文本节点,然后将 .child2
的 display
设置为 flex
并将 align-self: center
添加到子节点span
垂直居中元素。
.child2 {
border-left: 1px black solid;
align-self: stretch;
display: flex;
}
.child2 > span {
align-self: center;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: yellow;
}
.child1 {
background-color: green;
}
.child2 {
border-left: 1px black solid;
align-self: stretch;
display: flex;
}
.child2 > span {
align-self: center;
}
<div class="container">
<div class="child1">
<h1>Text</h1>
</div>
<div class="child2">
<span>should be centered vertically</span>
</div>
</div>
我需要在 flex 容器中居中 div 并保持整个容器的高度 div。显然,我有 align-items:stretch
用于保持高度或 align-items:center
用于居中块。 Flexbox 模型在保持父容器高度的情况下使 div 居中的好方法是什么?
JSFiddle:http://jsfiddle.net/symb8s02/
您可以用 span
元素包裹文本节点,然后将 .child2
的 display
设置为 flex
并将 align-self: center
添加到子节点span
垂直居中元素。
.child2 {
border-left: 1px black solid;
align-self: stretch;
display: flex;
}
.child2 > span {
align-self: center;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: yellow;
}
.child1 {
background-color: green;
}
.child2 {
border-left: 1px black solid;
align-self: stretch;
display: flex;
}
.child2 > span {
align-self: center;
}
<div class="container">
<div class="child1">
<h1>Text</h1>
</div>
<div class="child2">
<span>should be centered vertically</span>
</div>
</div>