跳转到内容

层叠样式表/居中

来自维基教科书,开放的书籍,为一个开放的世界

对具有定义宽度的元素使用 margin: 0 auto 来水平居中块级容器

在 HTML 邮件中,对具有定义宽度的元素使用 margin-left:auto; margin-right:auto; 代替 margin:0 auto; 来水平居中块级容器

在符合标准的浏览器中,使用 margin: 0 auto; display: table; 来水平居中未定义宽度的内容

在 IE6 和 IE7 中,对容器使用 text-align: center;,对块元素使用 text-align: left, display:inline-block, 和 display:inline(在单独的声明中触发 hasLayout)来水平居中未定义宽度的内容。

在跨浏览器中,对容器使用 text-align: center,对包装 div 使用 display:inline-block(-moz-inline-box 用于 Firefox 2),对内容 div 使用 display:inline 来水平居中未定义宽度的内容。

在随后的 IE 特定声明中将包装 div 设置为 display:inline 以触发 hasLayout。

在随后的声明中将内容 div 设置为 display:-moz-inline-box 以触发 Firefox 2 的实验性布局。

如果居中的内容换行,请对包装 div 使用 width:99% 以避免在 Firefox 3+ 和 Webkit 浏览器(Safari、Iron、Chromium、Chrome 等)中出现问题。在 Firefox 2 中,在包装器中添加一个固定宽度的 div 来解决这个问题。最终的跨浏览器 CSS 遵循这种模式

.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>

在符合标准的浏览器中,对容器使用 display: table; height: 100%;,对内容使用 display: table-cell; vertical-align: middle; 来垂直居中未定义高度的内容。如果容器是 body 的第一个子元素,则对 html 和 body 标签也使用 height:100%;

在 IE6 和 IE7 中,对容器使用 position: relative; top: 50%;,对内容使用 position: absolute; top: -50% 来垂直居中未定义高度的内容

使用与容器高度相同的行高来垂直居中图像。在 IE6 和 IE7 中也使用与容器高度相同的字体大小。

使用 position:relative; 和 top:-50%; left:-50%; 来居中具有未定义宽度和高度的内容,该内容位于具有定义宽度和高度的绝对定位容器内

对 html 标签、body 标签、容器和一个空占位符元素使用 height:100%,对内容和占位符使用 display:inline-block; (-moz-inline-box 用于 Firefox 2) 和 vertical-align: middle 来跨浏览器垂直居中未定义高度的内容。如果在容器内添加一个空的内联块元素(例如 span),并为其分配 height: 100%; vertical-align: middle,那么它将允许我们精确地获得我们想要的东西:一个具有所需高度的行框。占位符元素被赋予 100% 的高度来支撑行框,以便 vertical-align: middle 具有预期的效果。这将避免由于跨浏览器支持 display:table 比 display:inline-block 差而导致的上述 IE 特定相对定位解决方法。如果内容是块元素,则在单独的声明中为 IE6 和 IE7 添加 display:inline 以触发 hasLayout 行为。最终的跨浏览器 CSS 遵循这种模式

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>

使用上述垂直居中模式,对内容 div 使用 display:inline,对额外的嵌套包装 div 使用 display:inline-block,以便在 Firefox、Safari 和 Chrome 中垂直居中图片库(IE 或 Opera 不需要更改)。确保包装器的宽度小于 100%,以避免这些浏览器中的内联块错误。以下是在跨浏览器中的模式

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>

指定行高与包含元素的高度相同,以垂直居中内联文本

使用 margin-top: xxx(其中 xxx 等于容器 div 的高度减去居中元素的高度)。将此值除以二,即可垂直居中块元素

使用 margin-left: xxx(其中 xxx 等于容器 div 的宽度减去居中元素的宽度)。将此值除以二,即可水平居中块元素

使用 top: 50% 和 margin-top: -xxx(其中 -xxx 等于定义高度的一半,以像素为单位)来垂直居中绝对定位的内容

使用 left: 50% 和 margin-left: -xxx(其中 -xxx 等于定义宽度的一半,以像素为单位)来水平居中绝对定位的内容

使用具有 display:inline-block 和 top:-50%; left:-50% 的 rel pos span,以及比 abs pos 父元素更高的 z-index,以在 abs pos 容器内居中内容。这利用了 IE 中的一个错误,即容器的计算高度用于定位,而不是它的高度值

使用 vertical-align 在同一行上居中图像和文本。如果 top、middle 或 bottom 不一致,请使用像素或百分比值。sub、super、text-top 或 text-bottom 值对于跨浏览器一致性不可靠

华夏公益教科书