原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15
方式一:margin:0 auto;
条件:元素定宽
元素为块级元素或行内元素设置display:block
元素的margin-left和margin-right都必须设置为auto
三个条件缺一不可。
Demo:
#wrap{height: 400px;width: 400px;background-color: red;margin: 0 auto;}
<div id="wrap"></div>
方式二:定位法
条件:元素定宽
元素绝对定位,并设置left:50%
元素负左边距margin-left为宽度的一半
Demo:
#wrap{height: 400px;width: 400px;background-color: red;position: relative;}
#inner{height: 100px;width: 100px;background-color: yellow;position: absolute;left:50%;margin-left:-50px; }
<div id="wrap">
<div id="inner"></div>
</div>
******元素不固定时,需要用到css3中的transform属性中的translate
translate(x,y) 定义 2D 转换。
Demo:
#wrap{height: 400px;width: 400px;background-color: red;position: relative;}
#inner{height: 100px;background-color: yellow;position: absolute;left:50%;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0); }
<div id="wrap">
<div id="inner">不定宽</div>
</div>