css 如何将页面上的div与flexbox垂直对齐[重复]

ix0qys7i 于 2023-02-17 发布在其他

关注(0)|答案(4)|浏览(136)

- 此问题在此处已有答案**：

Why is percentage height not working on my div? [duplicate]（2个答案）
六年前关闭了。
以下是未将div与浏览器选项卡中的文本垂直对齐（正确水平对齐）：

<div style="height: 100%; display: flex; align-items: center; justify-content: center;">

  <div>
    Some vertical and horizontal aligned text
  </div>

</div>

怎么了？

css

来源：https://stackoverflow.com/questions/39697530/how-to-vertically-align-div-on-page-with-flexbox

4条答案

按热度按时间

35g0bw711#

问题出在您给父容器的高度上。height :100%没有取整高。请将其更改为100vh或类似的值
以下是更新后的**Demo**

.container{
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

<div class="container">
  <div>
    Some vertical and horizontal aligned text
  </div>
</div>

赞(0）回复(0）举报 2023-02-17

5fjcxozz2#

请尝试以下代码

body, html{
  height:100%;
  width:100%;
  padding:0px;
  margin:0px;
}

.demo-wp{
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  background:green;
}

.inner-div{
  background:gold;
  padding:20px;
}

<div class="demo-wp">

  <div class="inner-div">
    Some vertical and horizontal aligned text
  </div>

</div>

赞(0）回复(0）举报 2023-02-17

u7up0aaq3#

试试这个：

<div style="height: 100vh; display: flex; align-items: center; justify-content: center;">
  <div>
    Some vertical and horizontal aligned text
  </div>
</div>

这是因为你的父母div没有采取完整的高度。

赞(0）回复(0）举报 2023-02-17

jslywgbw4#

试试这个

<div style="height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: lightgrey;">

  <div>
    Some vertical and horizontal aligned text
  </div>

</div>

赞(0）回复(0）举报 2023-02-17

我来回答

css 如何将页面上的div与flexbox垂直对齐[重复]

4条答案

相关问题

热门标签

最新问答