How to vertically align a div with a specific width / height to the center of the content?

Question

What will be the correct method for vertically centering any content in a specific width / height div .

In the example, there are two contents with different heights, the best way to center vertically as using the .content class. (and it works for every browser and without a table-cell solution)

Be able to make some decisions, but I would like to know other ideas using position:absolute; top:0; bottom: 0; position:absolute; top:0; bottom: 0; and margin auto .

Answer 1

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

Version 1: parent div displaying as a cell table

If you don't mind using display:table-cell in your parent div, you can use 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 and display of table of contents table

 .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 is floating and content div is as display cell table

 .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 to absolute content position

The only problem I came across with this version is that you seem to have to create css for each specific implementation. The reason for this is because the content of the div must be set to the height that your text will fill, and the top border will be inferred from this. This problem can be seen in the demo. You can make it work for each scenario manually by changing the height% of your div content and multiplying it by -.5 to get the maximum margin 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

Answer 2

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 works like a charm if the height of the element is not fixed.

Answer 3

margin: all_four_margin

providing 50% for all_four_margin, center the item

style="margin: 50%"

You can also apply it for the following

margin: upper right lower left

margin: upper right and lower left

margin: upper and lower right and left

by setting the appropriate%, we get the element wherever we want.