在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/

编辑:向身体和页面添加高度%.

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>