How to vertically align into the center of the content of a div with defined width height

Question

What would be the correct method to vertically center any content in a defined width height div   In the example there are two contents with different heights  what is the best way to center vertically both using the class  content    and it works for every browser and without the solution of table-cell   Have some solutions on mind  but would like to know other ideas  one is using position absolute  top 0  bottom  0  and margin auto

User · Accepted Answer

I have researched this a little and from what I have found you have four options:

Version 1: Parent div with display as table-cell

If you do not mind using the display:table-cell on your parent div, you can use of the following options:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}?

Live DEMO

Version 2: Parent div with display block and content display table-cell

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}?

Live DEMO

Version 3: Parent div floating and content div as display table-cell

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}?

Live DEMO

Version 4: Parent div position relative with content position absolute

The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}?

Live DEMO

User · Answer

This could also be done using display  flex with only a few lines of code  Here is an example    container     width  100px    height  100px    display  flex    align-items  center      Live Demo

User · Answer

Simple trick to vertically center the content of the div is to set the line height to the same as height   lt div gt this is some line of text  lt  div gt  div   width  400px height  50px  line-height  50px     but this is works only for one line of text  Best approach is with div as container and a span with the value in it   cont     width  100px    height  30px    display  table      val     display  table-cell    vertical-align  middle          lt div class  quot cont quot  gt         lt span class  quot val quot  gt CZECH REPUBLIC  24532 PRAGUE  Sesame Street 123 lt  span gt       lt  div gt

User · Answer

I would say to add a paragraph with a period in it and style it like so   lt p class  quot center quot  gt   lt  p gt    lt style gt   center  font-size  0px  margin-bottom  anyPercentage     lt  style gt   You may need to toy around with the percentages to get it right

User · Answer

margin  all four margin  by providing 50  to all four margin will place the element at the center  style  margin  50    you can apply it for following too  margin  top right bottom left  margin  top right amp left bottom  margin  top amp bottom right amp left  by giving appropriate   we get the element wherever we want

User · Answer

I found this solution in this article   parent-element     -webkit-transform-style  preserve-3d    -moz-transform-style  preserve-3d    transform-style  preserve-3d      element     position  relative    top  50     transform  translateY -50        It work like a charm if the height of element is not fixed

[html] How to vertically align into the center of the content of a div with defined width/height?

Version 1: Parent div with display as table-cell

Version 2: Parent div with display block and content display table-cell

Version 3: Parent div floating and content div as display table-cell

Version 4: Parent div position relative with content position absolute

Examples related to html

Examples related to css

Examples related to vertical-alignment