CSS text align center vertically do not center

This question already has an answer here:

How do I vertically center text with CSS? 34 answers

---

使用Flexbox您可以在div中垂直设置文本

html, body {
    height: 100%;
}

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    text-align:center;
    display:flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size:350%;
}

<div id="dimScreen">
    <h1 >Big text</h1> 
</div>

---

您也可以使用table-layout来包含旧版浏览器。

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  display: table
}

#dimScreen {
  background: rgba(0, 0, 0, 0.5);
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

h1 {
  font-size: 350%;
}

<div id="dimScreen" style="">
  <h1>Big text</h1>
</div>

链接地址: http://www.djcxy.com/p/41668.html

上一篇: 文本不在div内的背景图像中间

下一篇: CSS文本垂直居中对齐不居中