css的盒子的居中
2016-09-07 本文已影响19人
huhu502
- 1）标准流下的居中显示
给盒子设置外边距
margin:0 auto; - 2)脱离标准流的就不能用上面那种方式
先让它向右走父盒子的一半，在向左走自己的一半
.one{
height: 300px;
width: 577px;
border: 1px solid black;
position: relative;
margin: 0 auto;
}
.two{
width: 100px;
height: 100px;
border: 1px solid green;
position: absolute;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
</div>
</div>
这种情况下子盒子不居中，父盒子居中
例子：
.two{
width: 100px;
height: 100px;
border: 1px solid green;
position: absolute;
left: 50%; 父盒子的一半
margin-left: -50px;子盒子向左走自己的一半width: 100px/2
}
- 3）下面的情况相当于margin: 0 auto;
margin-left: auto; 先跑到最右边
margin-right: auto; 跑到中间
