CSS中心 - 多行如何实现？
CSS中心 - 多行如何实现？
提问于 2018-06-03 23:54:49
.center {
height: 200px;
border: 3px solid green;
text-align: center;
vertical-align: middle;
}
p {
margin: 0;
padding: 0;
}
<div class="center">
<p>I am vertically and horizontally centered.</p>
<p>I am vertically and horizontally centered.</p>
</div>
如何使线条垂直居中？
回答 2
Stack Overflow用户
发布于 2018-06-04 08:01:25
Flexbox解决方案：
.center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px solid green;
height: 200px;
}
p {
margin: 0;
padding: 0;
}<div class="center">
<p>I am vertically and horizontally centered.</p>
<p>I am vertically and horizontally centered.</p>
</div>
Stack Overflow用户
发布于 2018-06-04 09:43:56
你可以用display: flex:
.center {
height: 200px;
border: 3px solid green;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
p {
border: 1px solid red;
margin: 0;
padding: 0;
}<div class="center">
<p>I am vertically and horizontally centered. </p>
<p>I am vertically and horizontally centered. </p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004715
复制相关文章
相似问题