CODEWITHSUNDEEP
htmlcsslayoutcss-position
Leonardo
Leonardo

Reputation: 4228

Vertically center a div - Browser Compatibility

Let's say I have a container Div A of unknown height and inside it a Div B of known height

A                                                    
┌─────────────────────────────────┐  ▲               
│                                 │  │               
│    B                            │  │               
│   ┌─────────────────────────┐   │  │               
│   │▲                        │   │                  
│   ││Known Height            │   │  Unknown Height  
│   │▼                        │   │                  
│   └─────────────────────────┘   │  │               
│                                 │  │               
│                                 │  │               
└─────────────────────────────────┘  ▼

I want to vertically center B within A. Now I have found these two methods, both using absolute positioning.

Technique 1

.B {
    /* height has to be declared or it won't work */
    height: 200px; 
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

In this case the height must be declared to make this work. Also it doesn't work on windows phone.
Reference: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Technique 2

.B {
    /* we have to set width and height */
    height: 120px;
    width: 960px;
    position: absolute;
    margin-top: -60px;      /* half of the .B div height */
    margin-left: -480px;    /* half of the .B div widht */
    top: 50%;
    left: 50%;

}

Also in this case we have to know the height of the contained B div.
Reference: https://css-tricks.com/centering-in-the-unknown/

Which one of these two is the most cross-browser compatible technique ?
Does exist a more broad solution for this problem working on most of the browser (from IE8 as lower requirements).

Upvotes: 2

Views: 862

Answers (3)

display-name-is-missing
display-name-is-missing

Reputation: 4409

Here are two other methods:

1. Using pseudo-element on the container

#container:before {
   content:'';
   display:inline-block;
   vertical-align:middle;
   height:100%;
}

#content {
   display:inline-block;
   vertical-align:middle;
}

This method should be compatible with most browsers except IE8 and below: http://caniuse.com/#search=%3Abefore

jsFiddle demo

Note that in this case, the element being vertically centered needs to have display:inline-block

2. Using display:table-cell;

#container {
   display:table-cell;
   vertical-align:middle;
}

This method should be compatible with 99.98% of the browsers: http://caniuse.com/#search=css%20table

jsFiddle demo

Upvotes: 1

khv2online
khv2online

Reputation: 100

If size of the element B is known than absolute positioning with negative margins is more solid solution. It works well in most browsers.

Upvotes: 0

Anupam Basak
Anupam Basak

Reputation: 1523

You can try this:

.B {
    height: 120px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Example1: http://jsfiddle.net/k477zumz/ (Only vertical Centering)

Example2: http://jsfiddle.net/k477zumz/1/ (Both vertical and horizontal centering)

Upvotes: 1

Related Questions