JBurlison JBurlison - 1 month ago 6
CSS Question

Centering text vertically and horizontally in a div

I am using bootstrap and I am attempting to make a Cell that is 100% height and width of its host container.

The title is 30% of that space and the value is 70%. There are upper and lower limits of the value that take up 20% each leaving 60% of the space for the actual value.

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;
}


Fiddle of my attempt:
http://jsfiddle.net/WCBjN/1173/

EDIT: added height % to body and page.

Answer

Making text central is fairly trivial, the easiest approach is as follows. You can check out the jsFiddle too: 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>