一、记录下几种盒子居中的方法:
代码演示(html使用同一个Demo):
html Demo:
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
1.0、margin固定宽高居中;
CSS:
#container {
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
width: 200px;
height: 200px;
margin: 150px 200px;
background-color: #0ff;
}
2.0、负margin居中;
利用负的margin来进行居中,需要知道固定宽高,限制比较大。
CSS:
#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
width: 200px;
height