Categories
css html

How can I center text (horizontally and vertically) inside a div block?

1115

I have a div set to display:block (90px height and width), and I have some text inside.

I need the text to be aligned in the center both vertically and horizontally.

I have tried text-align:center, but it doesn’t do the vertical centering part, so I tried vertical-align:middle, but it didn’t work.

Any ideas?

3

1831

If it is one line of text and/or image, then it is easy to do. Just use:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

That’s it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for “vertical align”.

Since they tend to be hacks or adding complicated divs… I usually use a table with a single cell to do it… to make it as simple as possible.


Update for 2020:

Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

To specify a fixed width for the child, which is called a “flex item”:

#content {
  flex: 0 0 120px;
}

Example: http://jsfiddle.net/2woqsef1/1/

To shrink-wrap the content, it is even simpler: just remove the flex: ... line from the flex item, and it is automatically shrink-wrapped.

Example: http://jsfiddle.net/2woqsef1/2/

The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.

One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column; to the flex container. This is how it works between a flex container and its immediate child elements.

There is an alternative method of doing the centering: by not specifying center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.


Update for 2016 / 2017:

It can be more commonly done with transform, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:

position: relative;
top: 50%;
transform: translateY(-50%);

Example: https://jsfiddle.net/wb8u02kL/1/

To shrink-wrap the width:

The solution above used a fixed width for the content area. To use a shrink-wrapped width, use

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Example: https://jsfiddle.net/wb8u02kL/2/

If the support for Internet Explorer 10 is needed, then flexbox won’t work and the method above and the line-height method would work. Otherwise, flexbox would do the job.

14

  • 67

    There’s now a display: table-cell property for that, FYI. Using it makes the element behave like a table cell and allows vertical-align: middle;

    – Shauna

    Apr 18, 2011 at 14:38

  • 1

    If you’re using font: with these, make sure you put it ahead of line-height`.

    Aug 2, 2013 at 10:03

  • 4

    This might not be working as intended when the div contains <br/> elements.

    Jun 5, 2014 at 15:47

  • 7

    What if my height in %?

    Aug 3, 2016 at 1:24

  • 1

    with this approach text text has to be in one line, otherwise you will have second line 90px below first.

    Dec 10, 2016 at 12:35

480

Common techniques as of 2014:


  • Approach 1 – transform translateX/translateY:

    Example Here / Full Screen Example

    In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    

  • Approach 2 – Flexbox method:

    Example Here / Full Screen Example

    In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Just don’t forget to add vendor prefixes for additional browser support (see example).

    html, body, .container {
        height: 100%;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

  • Approach 3 – table-cell/vertical-align: middle:

    Example Here / Full Screen Example

    In some cases, you will need to ensure that the html/body element’s height is set to 100%.

    For vertical alignment, set the parent element’s width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

    For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level.

    html, body {
        height: 100%;
    }
    .parent {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }
    .parent > .child {
        display: table-cell;
        vertical-align: middle;
    }
    

  • Approach 4 – Absolutely positioned 50% from the top with displacement:

    Example Here / Full Screen Example

    This approach assumes that the text has a known height – in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element’s known height, in this case – -9px.

    html, body, .container {
        height: 100%;
    }
    .container {
        position: relative;
        text-align: center;
    }
    .container > p {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -9px;
    }
    

  • Approach 5 – The line-height method (Least flexible – not suggested):

    Example Here

    In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.

    Though this solution will work in some cases, it’s worth noting that it won’t work when there are multiple lines of text – like this.

    .parent {
        height: 200px;
        width: 400px;
        text-align: center;
    }
    .parent > .child {
        line-height: 200px;
    }
    

Methods 4 and 5 aren’t the most reliable. Go with one of the first 3.

1

  • 4

    2. Flexbox method is the only one which works if .containers parent is absolute. 1. method makes parent to shrink because of absolute .container and 3. method simply didnt work while .parent had absolute position.

    Apr 13, 2015 at 8:03

95

Using flexbox/CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

The CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Taken from Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally

3

  • 4

    Careful: Won’t work in IE. You’ll need to add display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center.

    Dec 31, 2016 at 4:16


  • add text-align:center for inline- elements .. such as text.

    – user4244405

    Sep 13, 2018 at 23:34

  • Note that flexbox now has at least partial support in IE 10 and 11, and works for 97% of users according to caniuse. I don’t think browser support is an argument against it anymore.

    Sep 12, 2019 at 11:28