How can a text responsively aligned middle vertically within a div

0
votes

I know how to vertically align a text center within a div when the height of text is known. Say the text's height is 20px.

Wrap the text with a span. Style div & span.

div {
     position: relative;
}
span {
    display: block
    position: absolute;
    top: 50%;
    height: 20px;
    margin-top: -10px;
}

Now I want to responsively align the text. What I want is the font-size of the text be in proportion to the height of the body. Say I have the following style:

body {
    font-size: 100%;
}
span {
    font-size: 1.5em;
}

Then I will change the font-size of body when the window size changed. In this situation, the height of the text is not determined. Then how to vertically align the text middle?

I know I can use JavaScript to dynamically change the height and margin-top of the span. But I have to do this after the window size changed. Then there is a chance that the window size changed, then the user see the the text not in the middle, then the JS code executed and the text jumped to the middle of the div. This may not be an acceptable solution.

I want to know if there is a pure CSS solution.

I guess I can use the following style to vertically align the text center.

div {
    display: table-cell;
    vertical-align: middle;
}

But with this solution, the margin of the div is not rendered properly. And the semantic is not right.

So is there a perfect solution?

3
javascripthtmlcssvertical-alignment
You aren't looking for this then? jsfiddle.net/Wznmc – Josh Crozier
The margin won't work in this solution, as I point out at the last of the description. – zyy7259
I know you said that.. that's why I asked.. just checking to see if you didn't overlook something. – Josh Crozier

3 Answers

0
votes

Another purely CSS (CSS3) solution without table display properties would be to use the transform: translateY() property.

You'll need a container div and the inner span for you text:

HTML

<div id="container">
    <span>Your Text</span>
</div>

CSS

#container{
    position: relative;
}

#container span{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

    /* Your font-size CSS */
}

JsFiddle example: https://jsfiddle.net/a0m4xnex/1/

You can use the same strategy for horizontal centering as well with translateX.

0
votes

Helper Div can help you vertically align div

Works best for me, you can alter it accordingly 

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}
<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>
0
votes

With flex box, you can do this: JSBIN

Essentially, here is the code (remember to add prefixes if needed): 

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

body {
  display: flex;
  justify-content: center; /* horizontal centering */
}

div {
   align-self: center; /* vertical centering */
}
<body>
  <div>Centered</div>
</body>