Geek Answers Handbook

How to do vertical + horizontal centering in CSS

What usually happens is that I want to center the css field inside the other both vertically and horizontally. What is the easiest way to do this to satisfy the following restrictions?

  • The box should be precisely centered, not approximately.
  • The technique should work in modern browsers and in versions of IE up to 8
  • This method should be independent of explicit knowledge of the width or height of both centralized content and content.
  • I usually know that a container has more content, but support for more content (which then overflows symmetrically) will be nice ...
  • The underlying content of the container should still respond to clicks and freezes, except that it is hidden by centered content

I am currently using 4 (!) Nested divs to achieve this, css along the following lines:

.centering-1 { position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; visibility:hidden; } .centering-2 { height:100%; display:inline-table; } .centering-3 { display:table-cell; vertical-align:middle; } .centering-content { visibility:visible; }

You can see this in action as a jsbin snippet . However, this approach, while working, feels like an excessive excess due to the large number of wrapper delimiters, and it does not work with content that is larger than the container. How can I center things in CSS?

+7
source share
2 answers

Horizontal centering is easy:

 .inner { width: 70%; /* Anything less than 100% */ margin-left: auto; margin-right: auto; }

But vertical centering is a bit complicated. The best technique for modern browsers is combining embedded blocks and pseudo-elements. This comes from the “Ghost Element,” the latest method at http://css-tricks.com/centering-in-the-unknown/ . It sets adds a pseudo-element and uses inline-block styles, getting centering. CSS:

 .outer { height: 10rem; text-align: center; outline: dotted black 1px; } .outer:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .inner { width: 10rem; display: inline-block; vertical-align: middle; outline: solid black 1px; }

Codepen example: http://codepen.io/KatieK2/pen/ucwgi

For simpler cases, the following options may be good:

For individual lines of content, you can perform a quick and dirty job of centering vertically in the text inside an element using a line height exceeding the font size:

 .inner { border: 1px solid #666; line-height: 200%; }

The solution with the broadest support is to use a non-semantic table. This works with very old versions of IE and does not require JavaScript:

 td.inner { vertical-align: middle; }

And here is a simple solution for known height elements (which can be in em s, not px ):

 .outer { position:relative; } .inner { position: absolute; top:50%; height:4em; margin-top:-2em; width: 50%; left: 25%; }
+2
source

You may have 2 more items. Anything less than this will require that IE8 (and IE9) not support it.

http://cssdeck.com/labs/0ltap96z

  <div class="centering-1"> <div class="centering-2"> <div class="intrinsically-sized-box"> <p>You can put any content here too and the box will auto-size.</p> </div> </div> </div>

CSS

 body {max-width:750px;} .generalblock { margin-top:2em; position:relative; padding:10px; border:20px solid cyan; font-size: 18px; } .centering-1 { position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; visibility:hidden; display: table; width: 100%; } .centering-2 { display:table-cell; vertical-align:middle; } .intrinsically-sized-box { visibility:visible; max-width:300px; margin: 0 auto; background: yellow; position:relative; border:1px solid black; }
+2
source

More articles:


All Articles