css在盒子中垂直居中和固定居中

时间:2023-03-09 07:36:52
css在盒子中垂直居中和固定居中

顶部固定居中

 <div class="w960 fixed">
我是固定的
</div> .w960{
width: 960px;
margin:0 auto;
}
.fixed{
position: absolute;
top:0;
left: 0;
right: 0;
height: 90px;
background: #ececec;
}

垂直居中

<div id="box">
<div class="son">ssss</div>
</div> #box {
width: 600px;
height: 500px;
position: relative;
border: 1px solid #f00;
}
.son {
width: 100px;
height: 100px;
border: 1px solid #ecc;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}