css 元素实现水平垂直居中 小结

作为一枚前端小白，写样式的时候碰到居中问题，常常记不住，就上网到处找。网上虽然很多，但是还是想自己总结一下所遇到的方法。

1、text-align：center

也就是对text、img、button等行内元素进行居中，可通过父元素来继承

2、margin：0 auto：水平居中

在已知宽度，没有设置浮动和绝对定位的元素此方法有效

3、line-height

让单行的文本垂直居中，适用于只有一行文字

4、vertical-align

使表格内的元素垂直居中 比如img

--------------------------------------------------------------------------------------------------------------

下面应该是小技巧方面的居中方法了

宽高已知情况下，元素水平垂直居中问题

第一种：

第二种：

第三种：这个方法在父元素宽高不确定的情况下也可以使用，display：table-cell，让元素以表格单元格显示，然后就可以使用表格的居中方法了，IE8以下不支持。

还是直接上图吧，先看下效果，左边代码，右边效果，但是看到下面会有一个问题（在我看来哈哈！）

我给两个div设置了两种颜色的边框，但是子元素的边框冲到了父元素的边框下，也就是说：当我不设置子元素内的文本和子元素的边框时，是看不到任何效果的。

所以子元素里必须有内容（行内元素）才能显示出效果，水平垂直居中的就是这个子元素里的内容，如果子元素的内容是块级元素的话，就会失效。上图：

还有一种情况就是子元素为行内元素的时候，效果是跟上面那个“子元素里是行内元素”一样的，，所以使用这种方法的小伙伴们要注意了。

宽高未知情况下，元素水平垂直居中

第一种：浮动元素居中，会多创建一个标签

第二种：子元素绝对定位，使用transform：translate（-50%，-50%），但是IE9以下不支持transform属性

先总结到这吧，如果有没补充到位的或者不足的地方还希望大家指出来。

之后遇到其他的方法会再补充上去。