Check This out

Question

我有以下代码：

body {
  height: 100%;
}
section {
  height: 70%;
}
.first {
  height: 10%;
}
.second {
  height: 10%;
}
.third {
  height: 10%;
}

<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section>

我需要first，second和third类的内容应垂直对齐中心。

Answer 1

如果你想使用css3 flexbox，你可以这样做：

＆＃13;

.main-container {
    height:calc(100vh);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.first,
.second,
.third {
  flex: 0 1 auto;
}

＆＃13;

<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section>

＆＃13;

Answer 2

添加以下CSS会将文本带到div的垂直中间

display: table-cell;
vertical-align: middle;

为了获得更好的结果，您可以将以下样式赋予外部div。

display:table;

Answer 3

最简单的方法是使用flex。

您应该注意height: xx%;需要计算父级的已知高度值。这里body{height:100%}是100%什么都没有（因此对于孩子们来说）因为html没有高度设置。

html,
body,
section{
  height: 100%;/* section inherits height value from body which inherits it from html */
  margin: 0;
}

section,
.first,
.second,
.third {
  margin:0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width:100%;
}
section {
}
.first {
  height: 10%;
}
.second {

  flex: 1;
  background:gray
}
.third {
  height: 10%;
}

<body>
  <section class="main-container">
    <div class="first">
      // content goes here
    </div>
    <div class="second">
      // content goes here
    </div>
    <div class="third">
      // content goes here
    </div>
  </section>
</body>

或者你的意思是中间网站内容，其中flex也很容易 （相同的CSS规则，但这里不需要flex imbrication）：

html,
body,
section{
  height: 100%;
  margin: 0;
}

section
{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width:100%;
  background:gray
}
section {
}
.first {
  height: 10%;
}
.second {
  height: 10%;
  background:lightgray
}
.third {
  height: 10%;
}

<body>
  <section class="main-container">
    <div class="first">
      // content goes here
    </div>
    <div class="second">
      // content goes here
    </div>
    <div class="third">
      // content goes here
    </div>
  </section>
</body>

Answer 4

使用Flex

＆＃13;

body,html {
  height: 100%;
}
section {
  height: 70%;
  display:flex;
  align-items: center;
  justify-content: center;
  
}
.first {
  height: 10%;
  background:green;
}
.second {
  height: 10%;
  background:blue;
}
.third {
  height: 10%;
  background:orange;
}

＆＃13;

<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section

＆＃13;

Answer 5

Check This out

INLINE CSS

<div class="section" style="text-align:center">...</div>

PURE CSS

.section {
    text-align:center;
}

垂直对齐div的中心

5 个答案:

Check This out

INLINE CSS

PURE CSS