CSS元素水平居中常用的几种方法

#CSS 元素水平居中

元素居中的问题我们也会经常遇到，在这里总结一下经常用的几种居中方法。
1：水平居中

 div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }

运行结果如下：

---

2：水平垂直居中
实现如下效果，即图片是水平和垂直方向都居中，有三种经常使用的方法：

①：水平垂直居中一

position: absolute;
            width: 90px;
            height: 80px;
            margin:auto;
            left:0;
            top: 0;
            right: 0;
            bottom: 0;

这种方法经常使用，也不会出现什么大的问题。
②：利用负边距

position: absolute;
            width: 90px;
            height: 80px;
            top: 50%;
            left: 50%;
            margin: -40px 0 0 -45px;//margin-top是高度的一半，margin-left是宽度的一半，都是负边距

这种方法兼容性不错，但是需要提前知道此元素的尺寸
③：使用transform

 position: absolute;
            width: 90px;
            height: 80px;
            top: 50%;
            left: 50%;
           transform: translate(-50%,-50%);

不需要提前知道元素的尺寸，支持IE 10+以上的浏览器。

以上便是经常用到的用于居中元素的方法。