css实现div水平/垂直居中的N中方法
1、父div内部的所有子div水平居中
// html 代码/*子元素纵向排列水平居中*/// 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%); 水平方向上居中且多个子元素重叠}
关键字:css, div, height, width