绝对定位元素的水平垂直居中
参考自:
小tip: margin:auto实现绝对定位元素的水平垂直居中
http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d-%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/
如何只用CSS做到完全居中
http://blog.jobbole.com/46574/
方法一:负margin值
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
好处:
- 浏览器兼容性非常好,甚至支持IE6-7
- 这是个非响应式的方法,不能使用百分比的大小,也不能设置min-/max-的最大值最小值。
- 需要提前知道元素的尺寸,否则margin负值的调整无法精确,此时,往往要借助JS获得。
- 内容可能会超出容器
- 需要为padding预留空间,或者需要使用box-sizing: border-box样式。
方法二:CSS3,transform translate偏移
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
transform中translate偏移的百分比值是相对于自身大小的。于是乎,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。
好处:
- 内容高度可变
- 不支持IE8
- 需要写厂商前缀
- 会和其他transform样式有冲突
- 某些情况下的边缘和字体渲染会有问题
方法三:margin:auto实现绝对定位元素的居中
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
上面代码的width: 600px height: 400px仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。
前提条件:元素设置有宽高,或隐性有宽高(如图片自身包括尺寸)
原理: top、right、bottom、left 属性都是指外边距边界距离父元素内边距边界的距离。当宽度固定时,设置 left: 0; right: 0; margin: auto; 可以让左右外边距自适应,使之让元素的宽度 + 元素的左右外边距 + 元素的左右边框 + 元素的左右内边距 = 父元素的宽度。
方法四:table-cell法、position:absolute/relative
支持 table-cell 方法的浏览器使用 table-cell
不支持的 IE 6/7 ,使用 position:absolute 和 position: relative
<div class="m-demo g-BothCtr-4">
<div class="tableCell">
<div class="cnt">content</div>
</div>
</div>
.m-demo {
height: 300px; /*高度值不能少*/
width: 300px; /*宽度值不能少*/
border: 1px solid #000000;
}
.g-BothCtr-4 {
display: table;
position: relative;
float: left; /*可不浮动,也可浮动*/
}
.g-BothCtr-4 .tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
*position: absolute;
*top: 50%;
*left: 50%;
}
.g-BothCtr-4 .cnt {
vertical-align: center;
display: inline-block;
*position: relative;
*top: -50%;
*left: -50%;
}
/*需要注意的是,使用这种方法,如果你的居中元素是放在body中的话,你需要给html,body设置一个“height:100%”的属性。*/
方法五:inline-block法
迫切需要的方法:inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。
内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然,内容区域会被推到顶端,这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小!
如果内容块需要尽可能大地占用水平空间,可以为大容器加上max-width: 99%;样式,或者考虑浏览器和容器宽度的情况下使用max-width: calc(100% – 0.25em) 样式。
这种方法和table-cell的大多数好处相同,不过最初我放弃了这个方法,因为它更像是hack。不管这一点的话,浏览器支持很不错,而且也被证实是很流行的方法。
内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然,内容区域会被推到顶端,这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小!
如果内容块需要尽可能大地占用水平空间,可以为大容器加上max-width: 99%;样式,或者考虑浏览器和容器宽度的情况下使用max-width: calc(100% – 0.25em) 样式。
这种方法和table-cell的大多数好处相同,不过最初我放弃了这个方法,因为它更像是hack。不管这一点的话,浏览器支持很不错,而且也被证实是很流行的方法。
<div class="Center-Container is-Inline">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
.Center-Container.is-Inline {
text-align: center;
overflow: auto;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
好处:
- 内容高度可变
- 内容溢出则能自动撑开父元素高度
- 浏览器兼容性好,甚至可以调整支持IE7
- 需要额外容器
- 依赖于margin-left: -0.25em的样式,做到水平居中,需要为不同的字体大小作调整
- 内容区声明的宽度不能大于容器的100% 减去0.25em的宽度
方法六:Flexbox法 (有待学习)
CSS未来发展的方向就是采用Flexbox这种设计,解决像垂直居中这种共同的问题。请注意,Flexbox有不止一种办法居中,他也可以用来分栏,并解决奇奇怪怪的布局问题。
.Center-Container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
好处:
- 内容可以是任意高宽,溢出也能表现良好
- 可以用于各种高级布局技巧
- 不支持IE8-9
- 需要在body上写样式,或者需要额外容器
- 需要各种厂商前缀兼容现代浏览器
- 可能有潜在的性能问题
方法七:CSS3 calc()函数
html,body{
width: 100%;
height: 100%;
}
.m-demo{
position: relative;
width: 100%;
height: 100%;
background-color: #000000;
}
.m-demo > div{
position: absolute;
left: calc(50% - 15%);/*50%和15%都是相对于父元素的,所以意思就是先过去50%,再拉回来15%,而这个15%又刚好是父元素宽度一半*/
top: calc(50% - 15%);/*原理同上*/
width: 30%;
height: 30%;
background-color: #FF0000;
}
/*.m-demo > div{
position: absolute;//这种固定宽高的也是可以用calc计算的,原理同上
left: calc(50% - 400px /2);
top: calc(50% - 400px / 2);
width: 400px;
height: 400px;
background-color: #FF0000;
}*/
<div class="m-demo">
<div></div>
</div>
兼容性:兼容性差,只有最新浏览器才支持
扩展性:高宽不可扩展
方法八:使用 table 标签
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>CSS垂直居中</title>
<style type="text/css">
.container{
width:500px;/*装饰*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<h1>垂直居中(table)</h1>
<div class='container'>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</td>
</tr>
</table>
</div>
</body>
</html>
方法九:图片垂直居中(图片作为背景图片,设置background-position: center)
<div class="container"></div>
.container {
width:500px;
height:500px;
line-height:500px;
background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) no-repeat center center;
border:1px solid #f00;
text-align: center;
}
方法十:CSS 表达式
<div class="container">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</div>
.container{
/*IE8与标准游览器垂直对齐*/
display: table-cell;
vertical-align:middle;
width:500px;/*装饰*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
.container img{
display:block;/*让其具备盒子模型*/
margin:0 auto;
text-align:center;
margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
}
方法十一:使用 button 标签
<button><img src="http://placehold.it/200x200" /></button>
button {
width: 400px;
height: 400px;
background: none;
border: 1px solid #ccc;
}
方法十二:淘宝经典方法--height : line-height = 1.14
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack
* 我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。
* 根据我们的计算,高度/字体大小的比值为1.14左右时IE可实现垂直居中。
*/
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}