在页面上水平和垂直地将单个子div对齐。
在页面上水平和垂直地将单个子div对齐。
提问于 2017-05-01 03:21:09
孩子是水平的，但不是垂直的。我认为这是因为例子容器需要一个高度设置。如果我想让它集中在整个页面上呢？
请参阅下面的代码片段。
.example-container {
display: flex;
align-items: center;
justify-content: center;
}
.example-child {
width: 100px;
height: 100px;
background-color: orange;
}<div class="example-container">
<div class="example-child">
<p>Sample Content...</p>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-01 03:22:28
它的高度在默认情况下只会和孩子一样大。添加height: 100vh或任何对您的布局有用的东西。
body { margin: 0; }
.example-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.example-child {
width: 100px;
height: 100px;
background-color: orange;
}<div class="example-container">
<div class="example-child">
<p>Sample Content...</p>
</div>
</div>
Stack Overflow用户
发布于 2017-05-01 09:20:07
在页面上水平和垂直地将单个子div对齐。
通过使用transform而不是flexbox，可以使用更少的标记和更广泛的浏览器支持来完成这一任务。
.example-container {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: orange;
}<div class="example-container">
<p>Sample Content...</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43713842
复制相关文章
相似问题
腾讯云开发者
