如何在容器中垂直居中行？ [复制]

Posted 2023-03-05

【中文标题】如何在容器中垂直居中行？ [复制]

【英文标题】：How to vertically center row in container? [duplicate]

【发布时间】：2017-07-27 12:56:00

【问题描述】：

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

我试图把 margin-top: auto;和边距底部：自动；但不起作用。 也垂直对齐：中间；也不行。

有没有简单的解决方法？

谢谢

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


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

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

【问题讨论】：

请向我们展示您的代码

我一直在寻找其他解决方案，但它们并没有具体说明引导程序中的行。

【参考方案1】：

您可以为此使用 flexbox：

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

【讨论】：

在要垂直居中的元素的父元素中使用它！像魅力一样工作！

不错的答案！ :)

【参考方案2】：

<div class="inner">
    <p>
      Text
    </p>
</div>

.inner 
  height: 200px;
  width: 300px;
  background: orange;
  vertical-align: middle;
  display: table-cell;

“文本”应垂直对齐。 显示表格单元格与垂直对齐一起使用。 我认为也应该可以使用 inline-elements 来做到这一点。

【参考方案3】：

基本上，这个question is a duplicate。该问题中解释了 Bootstrap 的各种居中方法。这将特别适用于您在container 中使用row 的场景。这里有两种不同的方法..

// method 1 flexbox
.container-flex 
    display: flex;
    align-items: center;


// method 2 translatey
.v-center 
    position: relative;
    transform: translatey(-50%);
    top: 50%;

http://www.codeply.com/go/b6wTQTzoe1

【参考方案4】：

设置行和的宽度和高度

.row 
    margin: 0 auto;

【讨论】：

那是水平对齐，不是垂直的