vertical align middle in

Question

I want to keep the height of #abc div at 50px and text to align vertically in the middle of the div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Mr. Alien · Accepted Answer · 2016-05-23T10:14:04.487

You can use line-height: 50px;, you won't need vertical-align: middle; there.

Demo

The above will fail if you've multiple lines, so in that case you can wrap your text using span and than use display: table-cell; and display: table; along with vertical-align: middle;, also don't forget to use width: 100%; for #abc

Demo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

Another solution I can think of here is to use transform property with translateY() where Y obviously stands for Y Axis. It's pretty straight forward... All you need to do is set the elements position to absolute and later position 50% from the top and translate from it's axis with negative -50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo

Note that this won't be supported on older browsers, for example IE8, but you can make IE9 and other older browser versions of Chrome and Firefox by using -ms, -moz and -webkit prefixes respectively.

For more information on transform, you can refer here.

this does not work if you have long text – Ms Designer Sep 16 '21 at 13:57 — Ms Designer, Sep 16 '21 at 13:57
magicly works for me w/ transform way @@ – Nam G VU Jan 08 '23 at 09:02 — Nam G VU, Jan 08 '23 at 09:02

Jaqen H'ghar · Answer 2 · 2016-06-19T19:21:56.170

119

Old question but nowadays CSS3 makes vertical alignment really simple!

Just add to #abc the following css:

display:flex;
align-items:center;

Simple Demo

Original question demo updated

Simple Example:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

edited Jun 19 '16 at 19:21

answered Jun 12 '16 at 21:31

Jaqen H'ghar

16,186
8
49
52

3

I would suggest also: display:grid; align-items:center; It works better when you have more than one object to align vertically together – Leonardo Daga Jul 29 '17 at 22:35
Which browsers ***supports*** `CSS3` ? – Kiquenet Jan 17 '18 at 16:05
@Kiquenet, 92% of the global market https://caniuse.com/#search=align-items – Daniel Kucal Dec 10 '18 at 23:57
1

This works very well, thank you. Some of the other posts have not aged well here, and I would suggest implementing this instead of using a heavier hand as some of the other approaches do. – Travis J Apr 07 '23 at 21:05

score 98 · Answer 3 · edited Oct 14 '17 at 14:06

98

It's simple: give the parent div this:

display: table;

and give the child div(s) this:

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

That's it!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

edited Oct 14 '17 at 14:06

Grant Winney

65,241
13
115
165

answered Jun 23 '14 at 13:12

Burak C

1,159
8
10

6

this is bad as this is using table as a hack, it may work for most cases, but when you want to change the width of the 'table' , then it's not gonna work properly(which i am having the issue now with this solution) – Kevin Simple Aug 06 '15 at 01:21
I didn't need to add the `display:table;`to the parent to make it work. – Vince Sep 22 '15 at 10:28
Perhaps this is a hack ... but it WORKS, and most other solutions work only in specific cases and are often not usable in our case. – Jerry Jan 31 '19 at 10:36
Advantage of this solution : works with all type of contents (not only for text, and not only a single line ...) – Jerry Jan 31 '19 at 10:37

score 49 · Answer 4 · answered Nov 19 '14 at 22:43

49

I found this solution by Sebastian Ekström. It's quick, dirty, and works really well. Even if you don't know the parent's height:

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

Read the full article here.

answered Nov 19 '14 at 22:43

Great Scott

1,325
15
22

4

This might blur things because the result of transforms can be lead to things being positioned at half pixel locations. – Kevin Wheeler Jul 17 '15 at 05:30
1

There is an update on the post targeting that issue. On parent: `transform-style: preserve-3d;`! – Andry Jul 29 '15 at 09:25

score 11 · Answer 5 · answered Jun 21 '19 at 12:14

11

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

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

<div class="text-align-center"> Align center</div>

answered Jun 21 '19 at 12:14

Fouzia Khan

251
3
5

Explain it please! – Szabolcs Páll Jun 21 '19 at 12:30
`align-items: center` only align the text vertically, but not horizontally. `justify-content: center` does the trick. That `.text-align-center` is the exact 3 lines of code you need to align element to the middle div. Thank you. – Jeson Martajaya Jul 15 '22 at 19:39

score 8 · Answer 6 · answered Jan 13 '15 at 09:00

8

You can use Line height a big as height of the div. But for me best solution is this --> position:relative; top:50%; transform:translate(0,50%);

answered Jan 13 '15 at 09:00

Andris

3,895
2
24
27

Aldi Unanto · Answer 7 · 2013-09-06T03:25:41.143

4

How about adding line-height ?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Fiddle, line-height

Or padding on #abc. This is the result with padding

Update

Add in your css :

#abc img{
   vertical-align: middle;
}

The result. Hope this what you looking for.

edited Sep 06 '13 at 03:25

answered Sep 06 '13 at 03:13

Aldi Unanto

3,626
1
22
30

score 2 · Answer 8 · edited Mar 16 '17 at 08:44

Try this:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Another method for centering a div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

nilesh pawar · Answer 9 · 2019-10-31T09:55:19.270

2

This Code Is for Vertical Middle and Horizontal Center Align without specify fixed height:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

edited Oct 31 '19 at 09:55

answered Jan 19 '18 at 10:50

nilesh pawar

59
4

score 2 · Answer 10 · answered Dec 22 '20 at 21:24

.container { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<h2>Centering Div inside Div, horizontally and vertically without table</h2>
<p>1. Positioning and the transform property to vertically and horizontally center</p>
<p>2. CSS Layout - Horizontal & Vertical Align</p>

<div class="container">
  <div class="center">
    <p>I am vertically and horizontally centered.</p>
  </div>
</div>

score 1 · Answer 11 · answered Feb 17 '19 at 19:18

Use the translateY CSS property to vertically center your text in it's container

<style>
.centertext{

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

}
</style>

And then apply it to your containing DIV

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Adjust the translateY percentage to suit your needs. Hope this helps

vertical align middle in

11 Answers11

Linked

Related