css如何通过布局实现盒子水平垂直居中

通过布局实现盒子垂直水平居中

大致思想有两种 通过POSITION定位布局实现 通过DISPLAY:FLEX伸缩盒布局实现

Position

.father{ height:100px; width:100px; position:relative; } .child{ height:10px; width:10px; position:absolute; left:0;right:0;top:0;bottom:0; margin:auto; }

或者

.father{ height:100px; width:100px; position:relative; } .child{ height:10px; width:10px; position:absolute; //50%指父元素的50%，5px为子元素的一半高度，这样正好让子元素垂直居中，50%、减号、5px之间要空格 margin-top:calc(50% - 5px); //水平居中同理 margin-left:calc(50% - 5px); //可以写成不同的形式，但是思想相同 }

Display

.father{ height:100px; width:100px; display:flex; justify-content:center; align-items:center; }