104

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.

Cœur
  • 32,421
  • 21
  • 173
  • 232
Ricardo Rodrigues
  • 2,323
  • 5
  • 25
  • 31
  • 2
    Your questions should be fully self-contained. Otherwise, when the URL goes dead, it's useless. – Sparky Jun 10 '12 at 15:03
  • 1
    Possible duplicate: [how can i vertically center text in a dynamically high div](http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div) – doptrois Jun 11 '12 at 05:26
  • Probably , but that time didn't have the solution i want... this offers more options – Ricardo Rodrigues Apr 02 '13 at 11:38
  • 1
    **tl;dr in 2020**: `display: flex; align-items: center;`. If you *don't* want it to be horizontally centered as well, add `flex-direction: column;`. – Devin Burke Mar 29 '20 at 01:58

6 Answers6

137

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

Josh Mein
  • 26,372
  • 12
  • 72
  • 84
  • @JoshMein : Few more solutions: [how can i vertically center text in a dynamically high div](http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div) – doptrois Jun 11 '12 at 05:28
  • 2
    Version 2 is what I'm looking for, however the content doesn't get centered vertically. Does it matter what `area` is contained in, or what `content` contents is? – Shimmy Weitzhandler Nov 24 '15 at 15:37
72

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

martin36
  • 1,603
  • 3
  • 14
  • 21
  • 1
    @nihiser Only if you also want to center it horizontally also, or if you would have set `flex-direction: column` – martin36 May 11 '19 at 07:22
33

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.

N Kumar
  • 1,219
  • 18
  • 22
0

Simple trick to vertically center the content of the div is to set the line height to the same as height:

<div>this is some line of text!</div>
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;
}

    <div class="cont">
      <span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
    </div>
me-and-viy
  • 15
  • 4
-1

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

user15029851
  • 1
  • You may use this inside a
    . Margin-Bottom assumes you placed it first in your div component.
     – user15029851 Jan 18 '21 at 12:08
  • Not what I would call `responsive` since it will be pretty hardcoded. Maybe `calc()` could have helped here, but saying `anyPercentage%` is not the solution at all here. – kissu Jan 18 '21 at 12:31
-8

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&left bottom

margin: top&bottom right&left

by giving appropriate % we get the element wherever we want.

lokesh
  • 1