[html] How do I vertically align text in a div?

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.

.testimonialText {_x000D_
  position: absolute;_x000D_
  left: 15px;_x000D_
  top: 15px;_x000D_
  width: 150px;_x000D_
  height: 309px;_x000D_
  vertical-align: middle;_x000D_
  text-align: center;_x000D_
  font-family: Georgia, "Times New Roman", Times, serif;_x000D_
  font-style: italic;_x000D_
  padding: 1em 0 1em 0;_x000D_
}

<div class="testimonialText">_x000D_
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor_x000D_
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum._x000D_
</div>

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

I use the following to vertically center random elements easily:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

This centers the text in my div to the exact vertical middle of a 200px-high outer div. Note that you may need to use a browser prefix (like -webkit- in my case) to make this work for your browser.

This works not only for text, but also for other elements.

Use:

h1 {_x000D_
    margin: 0;_x000D_
    position: absolute;_x000D_
    left: 50%;_x000D_
    top: 50%;_x000D_
    transform: translate(-50%, -50%);_x000D_
}_x000D_
.container {_x000D_
    height: 200px;_x000D_
    width: 500px;_x000D_
    position: relative;_x000D_
    border: 1px solid #eee;_x000D_
}

<div class="container">_x000D_
    <h1>Vertical align text</h1>_x000D_
</div>

With this trick, you can align anything if you don't want to make it center add "left:0" to align left.

This is the cleanest solution I have found (Internet Explorer 9+) and adds a fix for the "off by .5 pixel" issue by using transform-style that other answers had omitted.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Source: Vertical align anything with just 3 lines of CSS

Hmm, there're obviously many ways to solve this.

But I have a <div> that's positioned absolutely, height:100% (actually, top:0;bottom:0 and fixed width) and display:table-cell just didn't work to center text vertically. My solution did require an inner span element, but I see many of the other solutions do also, so I might as well add it:

My container is a .label and I want the number vertically centered in it. I did it by positioning absolutely at top:50% and setting line-height:0

<div class="label"><span>1.</span></div>

And the CSS is as follows:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

See it in action: http://jsfiddle.net/jcward/7gMLx/

Flexbox worked perfectly for me, centering multiple elements inside parent div horizontally & vertically.

HTML-Code:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-Code:
Code below stacks all elements inside of parent-div in a column, centering the elements horizontally & vertically. I used the child-div to keep the two Anchor elements on same line (row). Without child-div all three elements (Anchor, Anchor & Paragraph) are stacked inside parent-div's column on top of each other. Here only child-div is stacked inside parent-div column.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Using flex, be careful with differences in browsers' rendering.

This works well both for Chrome and Internet Explorer:

.outer {_x000D_
    display: flex;_x000D_
    width: 200px;_x000D_
    height: 200px;_x000D_
    background-color: #ffc;_x000D_
}_x000D_
_x000D_
.inner {_x000D_
    display: flex;_x000D_
    width: 50%;_x000D_
    height: 50%;_x000D_
    margin: auto;_x000D_
    text-align: center;_x000D_
    justify-content: center;_x000D_
    align-items: center;_x000D_
    background-color: #fcc;_x000D_
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Compare with this one that works only with Chrome:

.outer {_x000D_
    display: flex;_x000D_
    width: 200px;_x000D_
    height: 200px;_x000D_
    background-color: #ffc;_x000D_
}_x000D_
_x000D_
.inner {_x000D_
    display: flex;_x000D_
    width: 50%;_x000D_
    height: 50%;_x000D_
    margin: auto;_x000D_
    background-color: #fcc;_x000D_
}

<div class="outer">_x000D_
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>_x000D_
</div>

You can use css flexbox.

.testimonialText {_x000D_
  height: 500px;_x000D_
  padding: 1em;_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  justify-content: center;_x000D_
  border: 1px solid #b4d2d2;_x000D_
}

<div class="testimonialText">_x000D_
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor_x000D_
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum._x000D_
</div>

You can align center text vertically inside a div using Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

You can learn more about it at A Complete Guide to Flexbox.

CSS:

.vertical {
   display: table-caption;
}

Add this class to the element that contains the things you want to align vertically

You can do this by setting the display to 'table-cell' and applying a vertical-align: middle;:

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

This is however not supported by all versions of Internet Explorer according to this excerpt I copied from http://www.w3schools.com/cssref/pr_class_display.asp without permission.

Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported by Internet Explorer 7 and earlier. Internet Explorer 8 requires a !DOCTYPE. Internet Explorer 9 supports the values.

The following table shows the allowed display values also from http://www.w3schools.com/cssref/pr_class_display.asp.

You need to add the line-height attribute and that attribute must match the height of the div. In your case:

.center {_x000D_
  height: 309px;_x000D_
  line-height: 309px; /* same as height! */_x000D_
}

<div class="center">_x000D_
  A single line._x000D_
</div>

In fact, you could probably remove the height attribute altogether.

This only works for one line of text though, so be careful.

There are several tricks to display content or an image in the center of a div. Some of the answers are really nice and I am fully agree with these too.

Absolute Horizontal And Vertical Centering In CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

There are more than 10 techniques with examples. Now it's up to you which you prefer.

No doubt, display:table; display:table-Cell is a better trick.

Some good tricks are the following:

Trick 1 - By using display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

CSS Code

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Trick 2 - By using display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

CSS code

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

Trick 3 - By using position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

Here's a great resource

From http://howtocenterincss.com/:

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

Using Flexbox

Inline with keeping this post up to date with the latest tech, here's a much easier way to center something using Flexbox. Flexbox isn't supported in Internet Explorer 9 and lower.

Here are some great resources:

• A guide to Flexbox
• Centering elements with Flexbox
• Internet Explorer 10 syntax for Flexbox
• Support for Flexbox

JSFiddle with browser prefixes

li {_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
  align-content: center;_x000D_
  flex-direction: column;_x000D_
  /* Column | row */_x000D_
}

<ul>_x000D_
  <li>_x000D_
    <p>Some Text</p>_x000D_
  </li>_x000D_
  <li>_x000D_
    <p>A bit more text that goes on two lines</p>_x000D_
  </li>_x000D_
  <li>_x000D_
    <p>Even more text that demonstrates how lines can span multiple lines</p>_x000D_
  </li>_x000D_
</ul>

Another solution

This is from zerosixthree and lets you center anything with six lines of CSS

This method isn't supported in Internet Explorer 8 and lower.

jsfiddle

p {_x000D_
  text-align: center;_x000D_
  position: relative;_x000D_
  top: 50%;_x000D_
  -ms-transform: translateY(-50%);_x000D_
  -webkit-transform: translateY(-50%);_x000D_
  transform: translateY(-50%);_x000D_
}

<ul>_x000D_
  <li>_x000D_
    <p>Some Text</p>_x000D_
  </li>_x000D_
  <li>_x000D_
    <p>A bit more text that goes on two lines</p>_x000D_
  </li>_x000D_
  <li>_x000D_
    <p>Even more text that demonstrates how lines can span multiple lines</p>_x000D_
  </li>_x000D_
</ul>

Previous answer

A simple and cross-browser approach, useful as links in the marked answer are slightly outdated.

How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or CSS line heights. No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera and Safari. There are two special stylesheets (one for Internet Explorer 7 and another for Internet Explorer 6) to help them along due to their CSS limitations which modern browsers don't have.

Andy Howard - How to vertically and horizontally center text in an unordered list or div

As I didn't care much for Internet Explorer 7/6 for the last project I worked on, I used a slightly stripped down version (i.e. removed the stuff that made it work in Internet Explorer 7 and 6). It might be useful for somebody else...

JSFiddle

.outerContainer {_x000D_
  display: table;_x000D_
  width: 100px;_x000D_
  /* Width of parent */_x000D_
  height: 100px;_x000D_
  /* Height of parent */_x000D_
  overflow: hidden;_x000D_
}_x000D_
_x000D_
.outerContainer .innerContainer {_x000D_
  display: table-cell;_x000D_
  vertical-align: middle;_x000D_
  width: 100%;_x000D_
  margin: 0 auto;_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
li {_x000D_
  background: #ddd;_x000D_
  width: 100px;_x000D_
  height: 100px;_x000D_
}

<ul>_x000D_
  <li>_x000D_
    <div class="outerContainer">_x000D_
      <div class="innerContainer">_x000D_
        <div class="element">_x000D_
          <p>_x000D_
            <!-- Content -->_x000D_
            Content_x000D_
          </p>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </li>_x000D_
_x000D_
  <li>_x000D_
    <div class="outerContainer">_x000D_
      <div class="innerContainer">_x000D_
        <div class="element">_x000D_
          <p>_x000D_
            <!-- Content -->_x000D_
            Content_x000D_
          </p>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </li>_x000D_
</ul>

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Check this simple solution:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Using CSS grid did it for me:

.outer {_x000D_
  background-color: grey;_x000D_
  width: 10rem;_x000D_
  height: 10rem;_x000D_
  display: grid;_x000D_
  justify-items: center;_x000D_
}_x000D_
_x000D_
.inner {_x000D_
  background-color: red;_x000D_
  align-self: center;_x000D_
}

<div class='outer'>_x000D_
  <div class='inner'>_x000D_
    Content_x000D_
  </div>_x000D_
</div>

If you need to use with the min-height property you must add this CSS on:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

This works fine:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Without and with the image tag <mat-icon> (which is a font).

Try this, add on the parent div:

display: flex;
align-items: center;

It is easy with display: flex. With the following method, the text in the div will be centered vertically:

div {_x000D_
  display: -webkit-flex;_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  /* More style: */_x000D_
  height: 300px;_x000D_
  background-color: #888;_x000D_
}

<div>_x000D_
  Your text here._x000D_
</div>

And if you want, horizontal:

div {_x000D_
  display: -webkit-flex;_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  justify-content: center;_x000D_
  /* More style: */_x000D_
  height: 300px;_x000D_
  background-color: #888;_x000D_
}

<div>_x000D_
  Your text here._x000D_
</div>

You must see the browser version you need; in old versions the code doesn’t work.

There's a simpler way to vertically align the content without resorting to table/table-cell:

http://jsfiddle.net/bBW5w/1/

In it I have added an invisible (width=0) div that assumes the entire height of the container.

It seems to work in Internet Explorer and Firefox (latest versions). I didn't check with other browsers

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

And of course the CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Try to embed a table element.

<div>_x000D_
  <table style='width:200px; height:100px;'>_x000D_
    <td style='vertical-align:middle;'>_x000D_
      copenhagen_x000D_
    </td>_x000D_
  </table>_x000D_
</div>

A simple solution to an element of not knowing values:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Here is a solution that works best for a single line of text.

It can also work for multi-lined text with some tweaking if the number of lines is known.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Here is a JSFiddle.

This is another variation of the div in a div pattern using calc() in CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

This works, because:

• position:absolute for precise placement of the div within a div
• we know the height of the inner div because we set it to 20px.
• calc(50% - 10px) for 50% - half the height for centering the inner div

Margin auto on a grid-item.

Similarly to Flexbox, applying margin auto on a grid-item centers it on both axes:

.container {
  display: grid;
}
.element {
  margin: auto;
}

According to Adam Tomat's answer there was prepared a JSFiddle example to align the text in div:

<div class="cells-block">    
    text<br/>in the block   
</div>

by using display:flex in CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

with another example and a few explanations in a blog post.

These days (we don't need Internet Explorer 6-7-8 any more) I would just use CSS display: table for this issue (or display: flex).

For older browsers:

Table:

.vcenter {_x000D_
    display: table;_x000D_
    background: #eee; /* optional */_x000D_
    width: 150px;_x000D_
    height: 150px;_x000D_
    text-align: center; /* optional */_x000D_
}_x000D_
_x000D_
.vcenter > :first-child {_x000D_
    display: table-cell;_x000D_
    vertical-align: middle;_x000D_
}

<div class="vcenter">_x000D_
  <p>This is my Text</p>_x000D_
</div>

Flex:

.vcenter {_x000D_
    display: flex; /* <-- Here */_x000D_
    align-items: center; /* <-- Here */_x000D_
    justify-content: center; /* optional */_x000D_
    height: 150px; /* <-- Here */_x000D_
    background: #eee;  /* optional */_x000D_
    width: 150px;_x000D_
}

<div class="vcenter">_x000D_
  <p>This is my text</p>_x000D_
</div>

This is (actually, was) my favorite solution for this issue (simple and very well browser supported):

div {_x000D_
    margin: 5px;_x000D_
    text-align: center;_x000D_
    display: inline-block;_x000D_
}_x000D_
_x000D_
.vcenter {_x000D_
    background: #eee;  /* optional */_x000D_
    width: 150px;_x000D_
    height: 150px;_x000D_
}_x000D_
.vcenter:before {_x000D_
    content: " ";_x000D_
    display: inline-block;_x000D_
    height: 100%;_x000D_
    vertical-align: middle;_x000D_
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */_x000D_
}_x000D_
_x000D_
.vcenter > :first-child {_x000D_
    display: inline-block;_x000D_
    vertical-align: middle;_x000D_
    max-width: 99.999%;_x000D_
}

<div class="vcenter">_x000D_
  <p>This is my text</p>_x000D_
</div>_x000D_
<div class="vcenter">_x000D_
  <h4>This is my Text<br/>Text<br/>Text</h4>_x000D_
</div>_x000D_
<div class="vcenter">_x000D_
  <div>_x000D_
   <p>This is my</p>_x000D_
   <p>Text</p>_x000D_
  </div>_x000D_
</div>

HTML :

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS :

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}