标签：code 浏览器兼容问题 支持 理解 center cell round 问题 移动
方法一：position加margin（兼容性：主流浏览器均支持，IE6不支持） 最容易让人理解也是最常见的一种方法
<div class="box">
<div class="center"></div>
</div>
/**css**/
.box {
width: 600px;
height: 600px;
background: #000;
position: relative;
.center {
position: absolute;
width: 100px;
height: 100px;
background: orange;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
另外一种margin+position
<div class="box">
<div class="center"></div>
</div>
/**css**/ .box { width: 600px; height: 600px; background: #000; position: relative; .center { position: absolute; width: 100px; height: 100px; background: orange; left: 50%; top: 50%; margin-left:-50px;
margin-top:-50px;
}
方法二：position加 transform（兼容性：ie9以下不支持 transform，手机端较好。）
/* css */
.box {
position: relative;
background:#ccc;
width: 600px;
height: 600px;}
.center {
position: absolute;
background: green;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width: 100px;
height: 100px;
}
方法三：display:flex;margin:auto
/* css */
.box {
background: yellow;
width: 600px;
height: 600px;
display: flex;
}
.center {
background: green;
width: 100px;
height: 100px;
margin: auto;
}
方法四：不固定宽高（IE67不支持）
.box {
background: yellow;
width: 600px;
height: 600px;
}
.content {
left:50%;
transform:translateX(-50%);
display:table-cell;//容器变单元格
vertical-align:middle;//单元格居中
}
方法五：类似于方法四
/*css*/ .box{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center; } .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green; }
方法六：纯position
/* css */
.box {
background: yellow;
width: 200px;
height: 200px;
position: relative;
}
.center {
background: green;
position: absolute;
width: 100px;
height: 100px;
left: 50px;
top: 50px;
}
方法七：flex;align-items: center;justify-content: center
.box {
background: yellow;
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.center {
background: green;
width: 100px;
height: 100px;
}
居中的方式网上会有很多种方法，熟练其中的一两种也就够用了。
移动端建议大家使用方法四和七不固定宽高，效果还是非常不错的；
pc端的话比较建议大家用纯position因为要考虑低版本浏览器兼容问题嘛。希望对你们有所帮助！
标签：code 浏览器兼容问题 支持 理解 center cell round 问题 移动
原文地址：http://www.cnblogs.com/wyfeng1/p/6032700.html
