如何在容器中垂直居中行? [英] How to vertically center row in container?

问题描述

默认情况下，该行与顶部对齐.

我试着把 margin-top: auto;和保证金底部:自动；但不起作用.也垂直对齐:中间；也不起作用.

有没有简单的解决方法?

谢谢

.container {背景颜色:黑色；高度:100px；}.排 {背景色:#fff;高度:50px；}

<div class="row">

解决方案

你可以使用flexbox:

.row {显示:弹性；对齐项目:居中；对齐内容:居中；}

By default the row aligns to the top.

I tried to put margin-top: auto; and margin-bottom: auto; but doesn't work. Also vertical-align: middle; also does not work.

Is there an easy fix to this?

Thanks

.container {
background-color:black;
height: 100px;
}

.row {
background-color:#fff;
height: 50px;
}

<div class="container">
  <div class="row">
  </div>
</div>

解决方案

You can use flexbox for this:

.row {
    display: flex;
    align-items: center;
    justify-content: center;
}

这篇关于如何在容器中垂直居中行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！