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 · Answer

I would say to add a paragraph with a period in it and style it like so:

<p class="center">.</p>

<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>

You may need to toy around with the percentages to get it right

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

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

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

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

Examples related to html

Examples related to css

Examples related to vertical-alignment