div居中佈局

<div class="box">
    <div class="content"></div>
</div>
複製程式碼

1.div水平居中

.box{
    margin: 0 auto;
}
複製程式碼

2.div已知寬度水平垂直居中(position)

.box{
    position: relative;
}
.content{
    position: relative;
    top: 50%;
    margin-top: -10px;
}
複製程式碼

3.div未知寬度水平垂直居中(transform)

.box{
    position: relative;
}
.content{
    position: relative;
    top: 50%;
    transform: translate(0, 50%);//x軸平移，y軸平移
}
複製程式碼

4.flex佈局

.box {
    display: flex;//flex佈局
    justify-content: center;//使子專案水平居中
    align-items: center;//使子專案垂直居中
}
複製程式碼

div三欄佈局

左欄、右欄定寬，中欄寬度不固定，三欄寬度加起來正好是100%。

絕對定位方法：用絕對定位固定在視窗兩邊，中間採用自適應寬度，利用margin屬性把兩邊撐開。

.content{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
}
.right{
    position: absolute;
    right: 0
}
.middle{
    margin: 0 100px;
}
複製程式碼

浮動方法：此方法要讓中間內容放在最後面，左列左浮動，右列右浮動，中間利用浮動的跟隨性。

.left{
    float: left;
}
.right{
    float: right;
}
.middle{
    margin: 0 100px;
}
複製程式碼

flex佈局

.contain{
    display: flex
}
.left, .right, .middle{
    flex: 1
}
複製程式碼

margin負值方法：此方法要讓中間內容放在最前面，並且要使用一個容器把其包起來，設定width為100%，隨螢幕自適應，然後讓外層元素整體浮動，內層為真正的內容。左右兩列均採用margin負值定位，左列左浮動，設定margin-left為-100%，右列也左浮動，然後設定margin-left為自身寬度的負值。三列相互關聯，受到內部影響不大。

.middle{
    margin: 0 100px;
    float: left;
    width: 100%;
}
.middle-contain{
    //真正內容
}
.left{
    float: left;
    margin-left: -100%;
}
.right{
    float: left;
    margin-left: -100px;
}
複製程式碼

居中佈局、三欄佈局

div居中佈局

div三欄佈局

相關文章