How do I align text vertically centre using CSS?

Question

i have the code below. I can't get it to align in the center of the division. Pls, may i have some advice? Thanks.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
                margin: auto;
                width: 70%;
                height:100px;
                background-color: yellow;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="center">How to get this text aligned in the center?</div>
    </body>
</html>

Does the `div` have multiple lines of text or only one? If only one, set `line-height: 100px;` (equal to height of div). — Harry, Aug 11 '14 at 04:01

EternalHour · Answer 1 · 2014-08-11T04:26:56.920

3

You need the line-height and vertical-align: middle properties.

height:100px;
line-height: 100px;
vertical-align: middle;

To elaborate what @Leo said, here is the code for multiple lines:

FIDDLE

.centered {
    height: 400px;
    display: table-cell;
    vertical-align: middle;
}

edited Aug 11 '14 at 04:26

answered Aug 11 '14 at 04:01

EternalHour

8,308
6
38
57

+1 However, be aware that this will ONLY work for a one-liner. Multiple lines will break the design – Leo Aug 11 '14 at 04:02
Hi, That's true. My problem actually lies with having multiple lines. Is there a way to fix that? Thanks. – schenker Aug 11 '14 at 04:05
@schenker there's no easy way to do that unless you are using `display:table-cell` – Leo Aug 11 '14 at 04:07

Sajad Karuthedath · Answer 2 · 2014-08-11T04:09:54.620

1

use vertical-align

DEMO here

.center {
    margin: auto;
    width: 70%;
    height:100px;
    background-color: yellow;
    text-align:center;


  vertical-align: middle;
    line-height: 100px;

}

if multiple lines are there you should use

display:table-cell

DEMO

edited Aug 11 '14 at 04:09

answered Aug 11 '14 at 04:02

Sajad Karuthedath

14,987
4
32
49

Kheema Pandey · Accepted Answer · 2014-08-11T05:21:17.577

1

If you need to center the multiline text. then use display: table-cell; check DEMO.

.center {
    margin: auto;
    width: 70%;
    height:100px;
    background-color: yellow;
    text-align:center;
  display: table-cell;
  vertical-align:middle;
}

Update:

If you are supporting only latest browser than you can also use CSS3 Flex Property. Check DEMO.

.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align Vertical */
}

edited Aug 11 '14 at 05:21

answered Aug 11 '14 at 04:06

Kheema Pandey

9,977
4
25
26

+1 this is the closest and neatest you will center the content vertically – Leo Aug 11 '14 at 04:08
Perfect! Works. Thanks so much! – schenker Aug 11 '14 at 04:24
display: table-cell will not work in IE7. Many people still need to support this browser, since Microsoft still supports it. And of course flex-box won't work either. – Erik Funkenbusch Aug 11 '14 at 04:45
@KheemaPandey - I wouldn't call that a polyfill.. it actually replaces your html with different markup, polyfills work by replacing behavior not structure... This can have very nasty side effects, not to mention completely altering the semantic meaning of your document. – Erik Funkenbusch Aug 11 '14 at 05:04
It's a horrible solution... on top of that, it requires non-standard css extension markup, -dt-table, etc.. this is an ugly "solution" that isn't a solution at all... The whole point of a polyfill is that you can add it to your page without it modifying your markup, or having to modify your markup to make it work... instead, this is creating even more non-standard ugliness, silenting replacing markup with tables... the "cure" is worse than the "problem". I suggest finding a different solution to the problem than "display: table" if you need IE7 compatibility. – Erik Funkenbusch Aug 11 '14 at 05:11
Since OP doesn't mentioned that he need IE7 solution, so i am not adding that solution. I hope no more negative voting.. – Kheema Pandey Aug 11 '14 at 05:22
I mean, why don't you just give it a fixed width(if that is possible in your project) and the just write" margin: 0 auto; "it is just one line of code an should do the trick down to IE8. Not sure about IE7 though. – Nils Aug 12 '14 at 10:13

score 1 · Answer 4 · answered Aug 11 '14 at 04:12

1

If the height is fixed, use the same value for line-height.

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

vertical-align: middle; is not required.

However, if the height is dynamic, use:

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

answered Aug 11 '14 at 04:12

user626818

1,338
1
11
12

How do I align text vertically centre using CSS?

4 Answers4