CSS实现垂直水平居中
2016-03-01 14:43
645 查看
一、绝对居中Absolute
Centering
需要声明元素高度
优点：
1.支持跨浏览器，包括IE8-IE10.
2.无需其他特殊标记，CSS代码量少
3.支持百分比%属性值和min-/max-属性
4.只用这一个类可实现任何内容块居中
5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
6.内容块可以被重绘。
7.完美支持图片居中。
缺点：
1.必须声明高度（查看可变高度Variable Height）。
2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。
3.在Windows Phone设备上不起作用。
浏览器兼容性：
Chrome,Firefox, Safari, Mobile Safari, IE8-10.
绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。
效果图：
解释：
通过以上描述，绝对居中（AbsoluteCentering）的工作机理可以阐述如下：
1、在普通内容流（normal
content flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。
W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.
2、position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。
Developer.mozilla.org:...an element that is positioned
absolutely is taken out of the flow and thustakes up no space
3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器。
Developer.mozilla.org:For absolutely positioned elements, the top,
right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).
4、 给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto
Developer.mozilla.org: The margin of the[absolutely positioned] element
is then positioned inside these offsets.
5、由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。
W3.org: If none of the three [top, bottom,height] are 'auto': If both
'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically
这么看来， margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的，所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。
简而言之（TL;DR）：绝对定位元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。
二、负外边距 Negative
块元素尺寸已知，外边距margin取负数，大小为width/height（不使用box-sizing:
当元素有padding值时，margin-left=（width+padding）/2，margin-top=（height+padding)/2;、
测试表明，这是唯一在IE6-IE7上也表现良好的方法。
优点：
1. 良好的跨浏览器特性，兼容IE6-IE7。
2. 代码量少。
缺点：
1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。
2. 内容可能溢出容器。
3. 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。
三、变形 Transforms
这是最简单的方法，不仅能实现绝对居中同样的效果，也支持可变高度方式使用。内容块定义transform: translate(-50%,-50%)，还要加上top: 50%; left: 50%;
优点：
1. 内容可变高度
2. 代码量少
缺点：
1. IE8不支持
2. 属性需要写浏览器厂商前缀
3. 可能干扰其他transform效果
4. 某些情形下会出现文本或元素边界渲染模糊的现象
四、表格单元 Table-Cell
总的说来这可能是最好的居中实现方法，因为内容块高度会随着实际内容的高度变化，浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记，需要三层元素让最内层的元素居中。
优点：
1. 高度可变
2. 内容溢出会将父元素撑开。
3. 跨浏览器兼容性好。
缺点：
需要额外html标记
五、行内块元素 Inline-Block
很受欢迎的一种居中实现方式，基本思想是使用display:
inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。
优点：
1. 高度可变
2. 内容溢出会将父元素撑开。
3. 支持跨浏览器，也适应于IE7。
缺点：
1.需要一个容器
2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
3.内容块宽度不能超过容器的100% - 0.25em。
六、Flexbox
这是CSS布局未来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。
记住Flexbox不只是用于居中，也可以分栏或者解决一些令人抓狂的布局问题
利用css3中的align-items和justify-content属性
为父元素设置align-items： center，justify-content：center，其所有子元素即可实现垂直居中对齐
效果图：
优点：
1.内容块的宽高任意，优雅的溢出。
2.可用于更复杂高级的布局技术中。
缺点：
1. IE8/IE9不支持。
2. Body需要特定的容器和CSS样式。
3. 运行于现代浏览器上的代码需要浏览器厂商前缀。
4. 表现上可能会有一些问题
Centering
需要声明元素高度
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
width: 100px;
border:1px solid red;
background: yellow;
}
.one{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.one{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
}
</style>
</head>
<body>
<div class='one'>
我要垂直水平居中
</div>优点：
1.支持跨浏览器，包括IE8-IE10.
2.无需其他特殊标记，CSS代码量少
3.支持百分比%属性值和min-/max-属性
4.只用这一个类可实现任何内容块居中
5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
6.内容块可以被重绘。
7.完美支持图片居中。
缺点：
1.必须声明高度（查看可变高度Variable Height）。
2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。
3.在Windows Phone设备上不起作用。
浏览器兼容性：
Chrome,Firefox, Safari, Mobile Safari, IE8-10.
绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。
效果图：
| Technique | Browser Support | Responsive | Overflow | resize:both | Variable Height | Major Caveats |
| Absolute Centering | Modern & IE8+ | Yes | Scroll, can overflow container | Yes | Yes* | Variable Height not perfect cross-browser |
| Negative Margins | All | No | Scroll | Resizes but doesn't stay centered | No | Not responsive, margins must be calculated manually |
| Transforms | Modern & IE9+ | Yes | Scroll, can overflow container | Yes | Yes | Blurry rendering |
| Table-Cell | Modern & IE8+ | Yes | Expands container | No | Yes | Extra markup |
| Inline-Block | Modern, IE8+ & IE7* | Yes | Expands container | No | Yes | Requires container, hacky styles |
| Flexbox | Modern & IE10+ | Yes | Scroll, can overflow container | Yes | Yes | Requires container, vendor prefixes |
解释：
通过以上描述，绝对居中（AbsoluteCentering）的工作机理可以阐述如下：
1、在普通内容流（normal
content flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。
W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.
2、position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。
Developer.mozilla.org:...an element that is positioned
absolutely is taken out of the flow and thustakes up no space
3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器。
Developer.mozilla.org:For absolutely positioned elements, the top,
right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).
4、 给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto
Developer.mozilla.org: The margin of the[absolutely positioned] element
is then positioned inside these offsets.
5、由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。
W3.org: If none of the three [top, bottom,height] are 'auto': If both
'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically
这么看来， margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的，所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。
简而言之（TL;DR）：绝对定位元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。
二、负外边距 Negative
Margins
块元素尺寸已知，外边距margin取负数，大小为width/height（不使用box-sizing:
border-box时包括padding）的一半，再加上top: 50%; left: 50%
<span style="font-size:18px;"><style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
width: 100px;
border:1px solid red;
background: yellow;
}
.two{
margin-top: -50px;
margin-left: -50px;
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div class='two'>
我要垂直水平居中
</div></span>当元素有padding值时，margin-left=（width+padding）/2，margin-top=（height+padding)/2;、
测试表明，这是唯一在IE6-IE7上也表现良好的方法。
优点：
1. 良好的跨浏览器特性，兼容IE6-IE7。
2. 代码量少。
缺点：
1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。
2. 内容可能溢出容器。
3. 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。
三、变形 Transforms
这是最简单的方法，不仅能实现绝对居中同样的效果，也支持可变高度方式使用。内容块定义transform: translate(-50%,-50%)，还要加上top: 50%; left: 50%;
div{
/* height: 100px; */
/* width: 100px; */
border:1px solid red;
background: yellow;
}
.three{
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
}
<div class='three'>
我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中
</div>优点：
1. 内容可变高度
2. 代码量少
缺点：
1. IE8不支持
2. 属性需要写浏览器厂商前缀
3. 可能干扰其他transform效果
4. 某些情形下会出现文本或元素边界渲染模糊的现象
四、表格单元 Table-Cell
总的说来这可能是最好的居中实现方法，因为内容块高度会随着实际内容的高度变化，浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记，需要三层元素让最内层的元素居中。
.center{
display:table;
}
.table-cell{
display:table-cell;
vertical-align:middle;
}
.center-block{
width:50%;
margin:0 auto;
}
<div class="center">
<div class="table-cell">
<div class="center-block">
<!--conternt-->
</div>
</div>
</div>优点：
1. 高度可变
2. 内容溢出会将父元素撑开。
3. 跨浏览器兼容性好。
缺点：
需要额外html标记
五、行内块元素 Inline-Block
很受欢迎的一种居中实现方式，基本思想是使用display:
inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。
优点：
1. 高度可变
2. 内容溢出会将父元素撑开。
3. 支持跨浏览器，也适应于IE7。
缺点：
1.需要一个容器
2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
3.内容块宽度不能超过容器的100% - 0.25em。
六、Flexbox
这是CSS布局未来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。
记住Flexbox不只是用于居中，也可以分栏或者解决一些令人抓狂的布局问题
利用css3中的align-items和justify-content属性
为父元素设置align-items： center，justify-content：center，其所有子元素即可实现垂直居中对齐
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
display: -webkit-flex;
display: flex;
}
</style>
</head>
<body>
<div class='three'>
我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中
</div>
</body>效果图：
优点：
1.内容块的宽高任意，优雅的溢出。
2.可用于更复杂高级的布局技术中。
缺点：
1. IE8/IE9不支持。
2. Body需要特定的容器和CSS样式。
3. 运行于现代浏览器上的代码需要浏览器厂商前缀。
4. 表现上可能会有一些问题
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android布局的小窍门？
- Web布局连载——两栏固定布局（五）
- easyui------显示隐藏列功能
- 样式表CSS布局经验
- 在winform下实现左右布局多窗口界面的方法之续篇
- css网页布局中注意的几个问题小结
- DL.DT.DD实现左右的布局简单例子第1/2页
- 使用CSS框架布局的缺点和优点小结
- div+CSS网页布局的意义与副作用原因小结第1/2页
- 在winform下实现左右布局多窗口界面的方法
- Android编程之代码创建布局实例分析
- CSS顶级技巧大放送，div+css布局必知
- 用div实现像table一样的布局方法
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- jQuery EasyUi实战教程之布局篇
- jQuery EasyUI 布局之动态添加tabs标签页
- jQuery Easyui实现左右布局
- android自定义RadioGroup可以添加多种布局的实现方法
- 瀑布流布局并自动加载实现代码