Center percent based div in fullscreen div

Question

I know that margin-top in percentage refers to the width ... Therefore, I can not always vertically and horizontally center a div, which is 50% of the height, and 50% of the width of the full screen.

http://jsfiddle.net/8BJ94/

When resizing, top edge relative to width

CSS

#mini { height : 50%; width : 50%; background-color : #FFFFFF; margin-top : 25%; margin-left : 25%; } 

Answer 1

Demo

http://jsfiddle.net/8BJ94/1/

Code

 #hello { position : absolute; width : 100%; height : 100%; background-color : #123456; text-align: center; } #hello:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } #mini { height : 50%; width : 50%; background-color : #FFFFFF; display: inline-block; vertical-align: middle; } 

Based on http://css-tricks.com/centering-in-the-unknown/

How it works?

• Horizontal centering (easy):

   #hello { text-align: center; } #mini { display: inline-block; } 

• Vertical centering:

  • Make the line height 100% high with the ghost element:

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

  • Center #mini vertically (relative to this line) with vertical-align :

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

Browser support

Essentially everything and IE 8+.

You can also support IE7 if you use the real element as a ghost instead of the :before pseudo-element. But this is not semantically correct.

Answer 2

Here is a better approach: (live example) . It is supported in all modern browsers. Link

Set the html / body elements to height:100% and width:100% .

Then set the mapping of the body or parent to table .

Finally, use display:table-cell and vertical-align:middle for the child.

This will take care of the vertical alignment.

To center horizontally, set margin:0px auto to the child.

In some cases, when the width of the child is not defined or dynamically generated, you can also use text-align:center , assuming that it is an inline element.

HTML

 <div id="parent"> <div id="child"></div> </div> 

CSS

 html, body { height:100%; width:100%; margin:0px; } body { display:table; } #parent { display:table-cell; vertical-align:middle; background:#123456; } #child { height:50%; width:50%; background:white; margin:0px auto; } 

Answer 3

Here's an easy way to get around CSS without using table layouts or using inline elements. The trick is to position the #mini element absolutely inside its parent halfway to the left and halfway from the top. After that, we compensate the element itself by half its width and height using CSS conversion:

 #mini { height: 50%; width: 50%; background-color : #FFFFFF; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 

See "Script"

CSS 2D conversion is widely supported among browsers today, with global support around 80%. You might want to include the -ms- provider prefix if you want to also support IE9 users.

Answer 4

It looks like you need to use some javascript. Using jQuery:

 $(document).ready(function() { var topMargin = $(window).height()*.25; $("#mini").css('margin-top', topMargin); }) $(window).resize(function() { var topMargin = $(window).height()*.25; $("#mini").css('margin-top', topMargin); }) 

Spell here: http://jsfiddle.net/dphaener/2n4PL/

The first function sets the margin to load the page, and the second sets it every time the window is resized.