在一个 div 中实现垂直和水平居中文本

Question

我正在使用Bootstrap，并尝试创建一个单元格，使其高度和宽度均为其容器的100％。

标题占据该空间的30％，值占据70％。值有上限和下限，每个占据20％，留下60％的空间用于实际值。

HTML：

<div class="container-fluid parameterContainer">
<div class="row paramHead">
    <span class="virtAlignFix"></span>
    <div class="centerText">
      SPO2 (%)
     </div>
</div>
<div class="row paramValWrapper">
  <div class="row paramLimit">
    <span class="virtAlignFix"></span>
    <div class="centerText">
    200
    </div>
  </div> 
  <div class="row paramValue">
    <span class="virtAlignFix"></span>
    <div class="centerText">
    80
    </div>
  </div>
  <div class="row paramLimit">
    <span class="virtAlignFix"></span>
     <div class="centerText">
     40
     </div>
  </div>
</div>

CSS：

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
}
.virtAlignFix {
    line-height: 100%;
}

.parameterContainer {
    height: 100%;
    width: 100%;
}

.paramValWrapper {
    height: 70%;
    width: 100%;
}

.paramLimit {
    height: 20%;
    width: 100%;
    text-align:center
}

.paramHead {
    height: 30%;
    width: 100%;
    text-align:center
}

.paramValue {
    height: 80%;
    width: 100%;
    text-align:center
}

.centerText {
 vertical-align:middle; 
    display:inline-block;  
}

我尝试创建的代码片段：

http://jsfiddle.net/WCBjN/1173/

编辑：在body和页面中添加了高度百分比。

- JBurlison

---

CSS 101：百分比高度只有在父元素也设置了显式高度时才有效。 - CBroe

是的，那就是这种情况。 - JBurlison

不，不是这样的。.parameterContainer 的父元素没有设置任何高度。 - CBroe

我在我的代码编辑器里修改了一下。你可以看到数值现在已经在 Div 的顶部了。 - JBurlison

line-height: 100%并不能实现你想要的效果，你需要进行更多的研究。关于居中已经讨论过无数遍了。 - CBroe

请参见：https://css-tricks.com/centering-css-complete-guide - user1063287

Answer 1

将文本居中是相当简单的，最简单的方法如下。您可以查看jsFiddle：https://jsfiddle.net/jL9bs0j7/

.text-container {
  height:200px;
  width:400px;
  border: 1px solid #000;
  text-align: center;
}

.text-container span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="text-container">
  <span>Hello World</span>
</div>

- Matt

---

抱歉，我对 CSS 还不是很熟悉。 - JBurlison

别担心，这个小技巧很简单，可以避免许多复杂的解决方法。 - Matt