css常用布局积累

1 我的假圣杯布局

圣杯布局是三列布局,中间宽度自适应,两边定宽

<body>
<div class="header">Header</div>
<div class="bd">
    <div class="header-center">center</div>
    <div class="header-left">Left</div>
    <div class="header-right">Right</div>
</div>
<div class="footer">Footer</div>
</body>
<style>

.header-left,.header-right{
        background-color: #2f4154;height: 61px;

}
.header-center{
    margin-left: 200px;
    margin-right: 200px;
}
.header-left{
    width: 200px;
    float: left;
}
.header-right{
    float: right;
    width: 200px;
}
</style>

2 水平居中

.parent{position:relative;}
.child{position:absolute; left:50%; transform:translate(-50%);}

3 水平垂直全部居中

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}