Question

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

我试图把margin-top：auto;和margin-bottom：auto;但是没有用。垂直对齐：中间;也行不通。

对此有一个简单的解决方法吗？

由于

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用 flexbox ：

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

Answer 2

基本上，这是question is a duplicate。在该问题中解释了Bootstrap的各种中心方法。这将专门适用于row内container的情景。这里有两种不同的方法..

// 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

Answer 3

设置行的宽度和高度

.row {
    margin: 0 auto;
}

Answer 4

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

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

＆＃34; Text＆＃34;应垂直对齐。显示表格单元格使用垂直对齐。我认为应该可以使用内联元素来实现它。

如何垂直居中容器中的行？

4 个答案: