CSS 居中 DIV 基础方法大全

在复习css时总结了几种居中div的方法与大家分享。

水平居中div

1. 利用外边距 ，div {margin : 0 auto;}。上下margin为0，左右为auto。但是这个方法对于浮动元素和定位元素失效，且元素必须有宽高。
2. 利用盒类型，div {display : inline-block; text-align : center;}改变盒类型，变成行内块。
3. 利用定位，给元素加一个相对定位的父元素或者直接给父元素一个相对定位，构造子绝父相。div的父元素{position:relative;} div{position : absolute; left : 50%; transform : translateX(-50%);}
4. 利用伸缩盒，给元素加一个父元素，父元素调整为伸缩容器，让主轴居中对齐。div的父元{ display : flex; justify-content : center;}

注意：浮动元素水平居中只能用定位。

垂直居中div

1. 利用行高 ，当容器高度已知且是单行文本时，可以用行高实现文本的垂直居中。div{height : 100px; line-height : 100px;}, 但是行高无法实现图像的居中。
2. 利用内边距，div {padding : 50px 0;} ,当容器的上下内边距相同时，内容就成了垂直居中。这种方式容器的高度需要有内容撑起来，不能设定值。
3. 利用盒类型，利用表格元素单元格td中vertical-align属性，可以让单元格垂直居中。div的父元素{display : table; } div{display : table-cell; vertical-align : middle;} 这种方法同样有局限，用这种方式居中的元素不能再用浮动和定位，且父元素必须中转成表格类型。
4. 利用定位，给元素加一个相对定位的父元素或者直接给父元素一个相对定位，构造子绝父相。div的父元素{position:relative;} div{position : absolute; top: 50%; transform : translateY(-50%);}
5. 利用伸缩盒，给元素加一个父元素，父元素调整为伸缩容器，让侧轴居中对齐。div的父元{ display : flex; align-items : center;}

大家要根据自己的情况做出合适的选择哟，有其他见解欢迎讨论。