css實現div水平/垂直居中的N中方法

一、父div內部的全部子div水平居中

// html 代碼
<div class="parent">
    <div class="chil"></div>
    <div class="chil"></div>
    <div class="chil"></div>
</div>

/*子元素縱向排列水平居中*/
// css 代碼
.parent{
    width: 400px; 
    height: 600px; 
} 
.chil{ 
    width: 120px;
    height: 120px; 
    margin: 0 auto; 
}

/*子元素橫向排列且水平居中*/
//css代碼
.parent{
    width: 400px;
    height: 400px;
    text-align: center;

}
.chil{
    width: 120px;    
    height: 120px;
    display: inline-block;
}

/*子元素縱向排列垂直居中*/
//css 代碼
.parent{
    width: 400px; 
    height: 600px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
}

/*子元素橫向排列垂直居中*/
// cs 代碼
.parent{
    width: 400px; 
    height: 400px; 
    display: flex; 
    align-items:center; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
}

/*子元素水平方向垂直方向都居中 方式一*/
//css代碼
.parent{
    width: 400px; 
    height: 400px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
    display: inline-block; 
}

/*子元素水平方向垂直方向都居中 方式二 若是有多個子元素會重疊在父元素中心位置*/
//css代碼
.parent{
    width: 400px; 
    height: 400px; 
    position: relative; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform:translate(-50%, -50%);
    //transform:translate(0, -50%); 垂直方向上居中且多個子元素重疊
    //transform:translate(-50%); 水平方向上居中且多個子元素重疊
}