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

【问题标题】：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>

【问题讨论】：

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

标签： html css twitter-bootstrap

【解决方案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;
}

【讨论】：

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