Div vertical alignment css

Question

I am trying to keep my text vertically aligned in the middle of the div for the abc div only.

I want the height to be 50 pixels and the text aligned vertically in the middle of the div.

I have yet to find a solution to this problem, maybe I was not looking for the right things.

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> 

Answer 1

You can use line-height: 50px; , you will not need vertical-align: middle; .

Demo

---

The above will fail if you have multiple lines, so in this case you can wrap the text with span and use display: table-cell; and display: table; along with vertical-align: middle; also remember 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 come up with here is to use the transform property with translateY() , where Y is obviously the Y-axis. It is pretty simple. All you have to do is set the position of the elements to absolute and a later position 50% of top and translate the axis with negative -50%

 div { height: 100px; width: 100px; background-color: tomato; position: relative; } p { position: absolute; top: 50%; transform: translateY(-50%); } 

Demo

Please note that this will not be supported in older browsers such as IE8, but you can make IE9 and other older versions of the Chrome and Firefox browser using the -ms, -moz and -webkit respectively.

More information on transform can be found here.

Answer 2

It is simple: give the parent div this:

 display: table; 

and give the child div (s):

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

What is 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> 

Answer 3

An old question, but now CSS3 makes vertical alignment really easy !

Just add the following css to #abc :

 display:flex; align-items:center; 

Simple demonstration

Original demo updated

A 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> 

Answer 4

I found this solution from Sebastian Extrem. It is fast, dirty and works very well. Even if you don’t know the parental height:

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

Read the full article here .

Answer 5

You can use line height as div height. But for me, the best solution is → position:relative; top:50%; transform:translate(0,50%); position:relative; top:50%; transform:translate(0,50%);

Answer 6

How to add 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 a supplemented result.

Update

Add to your css:

 #abc img{ vertical-align: middle; } 

Result . Hope this is what you are looking for.

Answer 7

Try the following:

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

Another method to center the 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; } 

Answer 8

Use the translateY CSS property to vertically center your text in this 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 percentage of transfer according to your needs. Hope this helps

Answer 9

  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> 

Answer 10

This code is for vertical mid and horizontal center alignment:

 .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%); }