Question

我试图垂直居中一个绝对定位的div的孩子没有运气。有人为此提供了很好的解决方案吗？（whitout js）。

<div class="title">
    <div>
        <span>03</span>
    </div>
    <h2>
        title
    </h2>
</div>

的CSS：

.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.title div,h2 {
    //i want to center these two verical
}

Answer 1

现代化的方式就是这样（我推荐额外的div）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.title-inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

</style>
</head>
<body>

<div class="title">
    <div class="title-inner">
        <div>
            <span>03</span>
        </div>
        <h2>
            title
        </h2>
    </div>
</div>

</body>
</html>

Answer 2

要进行垂直对齐，您必须使用vertical-align:middle 试试这个，我想你想要那样的东西？

*
{
margin:0;
padding:0;
}
.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
    display:table;
}

.vertically_algn {
    display:table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/qe8suw58/

Answer 3

您可以使用显示表和表格单元格来完成。当您不知道要对齐垂直中间的元素的高度和宽度时它们很好：）

* {
  margin: 0px;
}
.title {
  height: 100%;
  position: absolute;
  text-align: center;
  width: 100%;
  background: red;
  display: table;
}
.aligner {
  display: table-cell;
  vertical-align: middle;
}

<div class="title">
  <div class="aligner">
    <div>
      <span>03</span>
    </div>
    <h2>
        title
    </h2>
  </div>
</div>

CSS。绝对定位DIV的垂直中心

3 个答案: