html - How do I vertically center text with CSS?

Sunday, 29 October 2017

html - How do I vertically center text with CSS?

style="font-weight: bold;">

Answer

style="font-weight: bold;">

Answer

I have a
div element which contains text, and I want to align the contents of this div vertically
center.

Here is my div
style:

data-hide="false" data-console="false" data-babel="false">
class="snippet-code">

#box {
 height: 170px;
 width:
            270px;
 background: #000;

 font-size: 48px;

            color: #FFF;
 text-align:
            center;
}


 Lorem
            ipsum dolor
            sit

What
is the best way to do this?

itemprop="text">

class="normal">Answer

You can
try this basic approach:

data-lang="js" data-hide="false" data-console="true"
data-babel="false">

class="snippet-code-css lang-css prettyprint-override">

div {

            height: 100px;
 line-height: 100px;

 text-align:
            center;
 border: 2px dashed
            #f69c55;
}


 Hello
            World!

It
only works for a single line of text though, because we set the line's height to the
same height as the containing box element.

A more versatile
approach

This is another way to align text
vertically. This solution will work for a single line and multiple lines of text, but it
still requires a fixed height container:

class="snippet" data-lang="js" data-hide="false" data-console="true"
data-babel="false">
class="snippet-code">

div {
 height: 100px;

            line-height: 100px;
 text-align: center;
 border: 2px dashed
            #f69c55;
}
span {
 display: inline-block;

            vertical-align: middle;
 line-height:
            normal;

}

class="snippet-code-html lang-html
prettyprint-override">


 Hello
            World!

The
CSS just sizes the

, vertically center aligns the
by setting the

's line-height equal to its height, and makes the
an inline-block with

vertical-align:
            middle

. Then it sets the line-height back to normal for the
, so its contents will flow naturally inside the
block.

Simulating table
display

And here is another option, which may
not work on older browsers that don't support display: table and
display: table-cell (basically just Internet Explorer
7). Using CSS we simulate table behavior (since tables support vertical alignment), and
the HTML is the same as the second example:

class="snippet" data-lang="js" data-hide="false" data-console="true"
data-babel="false">

class="snippet-code-css lang-css prettyprint-override">

div {

            display: table;

 height: 100px;
 width: 100%;

            text-align: center;
 border: 2px dashed #f69c55;
}
span
            {
 display: table-cell;
 vertical-align:
            middle;
}




            Hello
            World!

Using absolute
positioning

This technique uses an
absolutely positioned element setting top, bottom, left and right to 0. It is described
in more detail in an article in Smashing Magazine, href="http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/"
rel="nofollow noreferrer">Absolute Horizontal And Vertical Centering In
CSS.

data-lang="js" data-hide="false" data-console="true"
data-babel="false">

class="snippet-code-css lang-css prettyprint-override">

div {

            display: flex;
 justify-content: center;
 align-items:
            center;
 height: 100px;
 width: 100%;

 border:
            2px dashed #f69c55;
}

class="snippet-code-html lang-html
prettyprint-override">


 Hello
            World!

Blog

Sunday, 29 October 2017