Jump to content

Cascading Style Sheets/Centering

Add links
From Wikibooks, open books for an open world

Use margin: 0 auto on elements with a defined width to horizontally center block level containers

Use margin-left:auto; margin-right:auto; instead of margin:0 auto; on elements with a defined width in HTML emails to horizontally center block level containers

Use margin: 0 auto; display: table; to horizontally center content that has an undefined width in standards compliant browsers

Use text-align: center; for the container and text-align: left, display:inline-block, and display:inline (in a separate declaration to trigger hasLayout) on the block element to horizontally center content that has an undefined width in IE6 and IE7.

Use text-align: center for the container, display:inline-block(-moz-inline-box for Firefox 2) for the wrapper div, and display:inline for the content div to horizontally center content that has an undefined width across browsers.

Set the wrapper div to display:inline in a subsequent IE specific declaration to trigger hasLayout.

Set the content div to display:-moz-inline-box in a subsequent declaration to trigger the Firefox 2 experimental layout.

In case the centered content wraps, use width:99% for the wrapper div to avoid issues in Firefox 3+ and Webkit browsers (Safari, Iron, Chromium, Chrome, etc). Add a fixed width div nested in the wrapper to address this in Firefox 2. The final cross-browser CSS follows this pattern: 

.container { text-align:center; }

/* Use width of less than 100% to avoid Firefox 3+ and Webkit wrapping issues */
.wrapper { width: 99%; }

/* Use inline-block for wrapper and placeholder */
.wrapper { display:-moz-inline-box; display: inline-block; }

.ie67 .wrapper, .content { display:inline; }

.content { display:-moz-inline-box; }

<!--[if lte IE 7]>
  <body class="ie67">
<![endif]-->

<![if (!IE) | (gt IE 7 )]>
  <body>
<![endif]>

<div class="container">
    <div class="content">
        <div class="wrapper">
            <div>fff</div>
            <div>ggg</div>
        </div>
    </div>
</div>

Use display: table; height: 100%; for the container and display: table-cell; vertical-align: middle; for the content to vertically center content that has an undefined height in standards compliant browsers. Use height:100%; for the html and body tags as well if the container is the first child of the body.

Use position: relative; top: 50%; for the container and position: absolute; top: -50% for the content to vertically center content that has an undefined height in IE6 and IE7

Use line-height equal to the height of the container to vertically center images. Use font-size equal to the height of the container as well in IE6 and IE7.

Use position:relative; and top:-50%; left:-50%; to center content that as an undefined width and height inside an absolutely positioned container with a defined width and height

Use height:100% for the html tag, body tag, container and an empty placeholder element plus display:inline-block; (-moz-inline-box for Firefox 2) and vertical-align: middle for the content and placeholder to vertically center content that has an undefined height across browsers. If an empty inline-block element (for example a span) is added inside the container and it is assigned height: 100%; vertical-align: middle then it allows to precisely get what we want: a line box with the desired height. The placeholder element is given 100% height to prop up the line box, so that vertical-align: middle has the desired effect. This will avoid the need for the aforementioned IE specific relative positioning workaround due to the lack of cross-browser support for display:table compared to display:inline-block. If the content is a block element, add display:inline in a separate declaration for IE6 and IE7 to trigger the hasLayout behavior. The final cross-browser CSS follows this pattern: 

html, body, #container, #placeholder { height: 100%; }

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

*#content{display:inline;}

  <div id="container">
    <div id="content">
        Vertically centered
    </div>
    <span id="placeholder"></span>
  </div>

Use the aforementioned vertical centering pattering with display:inline for the content div and display:inline-block to an extra nested wrapper div to vertically center an image gallery in Firefox, Safari, and Chrome(no change needed in IE or Opera). Make sure the width of the wrapper is less than 100% to avoid the inline-block bugs in those browsers as well. Here is the cross-browser pattern: 

html, body, .container, .placeholder { height: 100%; }

img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; }

/* Use width of less than 100% for Firefox and Webkit */
.wrapper { width: 99%; }

.placeholder, .wrapper, .content { vertical-align: middle; }

/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }

.ie67 .wrapper, .content { display:inline; }

  <!--[if lte IE 7]>
  <body class="ie67">
<![endif]-->

<![if (!IE) | (gt IE 7 )]>
  <body>
<![endif]>

<div class="container">
    <div class="content">
        <div class="wrapper">
            <img src="http://microsoft.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            ...
            ...
       </div>
   </div>
   <span class="placeholder"></span>
</div>

Specify the line height to be the same as the height of the containing element to vertically center inline text

Use margin-top: xxx (where xxx is equal to the height of the container div minus the height of the centered element). Divide this value by two to vertically center a block element

Use margin-left: xxx (where xxx is equal to the width of the container div minus the width of the centered element). Divide this value by two to horizontally center a block element

Use top: 50% and margin-top: -xxx(where -xxx is equal to half of the defined height in pixels) to center absolutely positioned content vertically

Use left: 50% and margin-left: -xxx(where -xxx is equal to half of the defined width in pixels) to center absolutely positioned content horizontally

Use a rel pos span with display:inline-block and top:-50%; left:-50% and a higher z-index than the abs pos parent to center content inside an abs pos container. This uses an IE bug where a container's computed height is used for positioning instead of its height value

Use vertical-align to center images and text on the same line. Use pixel or percentage values if top, middle, or bottom are inconsistent. The sub, super, text-top, or text-bottom values are unreliable for cross browser consistency

Retrieved from "https://en.wikibooks.org/w/index.php?title=Cascading_Style_Sheets/Centering&oldid=3443027"