Question

这是一个更复杂问题的简化版本。假设在体内有两个div，它们必须垂直居中。由于一些其他要求，DOM无法改变。所以只有通过改变CSS我需要垂直对齐它们居中。我已经尝试了很多其他stackoverflow帖子，但到目前为止还无法使其发挥作用。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>

body{

}
.div1{
    display: block;
    background: red;
    width: 300px;
}
.div2{
    display: block;
    background: green;
    width: 300px;

}
</style>
</head>
<body>

    <div class="div1">
        <p>This is div1</p>
    </div>
    <div class="div2">
        <p>This is div2</p>
    </div>

</body>
</html>

Answer 1

可以使用flexbox。

html,
body {
  height: 100%;
}

body {  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

请参阅此CodePen

垂直居中体内的两个div

1 个答案: