css水平垂直居中

Posted 2020-08-02 JcScript

关于css水平和垂直居中，这个在布局中真的是很常用的，也是面试题中比较偏基础的问题。今天我们就来总结一下源于css水平垂直居中的问题。

首先说道垂直水平居中，我想大家最先想到的方法一定是margin负。- -好吧是我最先想到的方法，下面我们就来说一下这个margin负的方法：

   #demo{
        background: red;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }

margin负方法，就是把元素定位，之后设置left和top都为50%，然后再拉回元素宽高的一半。所谓的负就是表示拉回宽高的一半（margin-left：-50px）

这种方法是最大众化的一种方法，也是兼容性最好的一种方法，但是这种方法的唯一缺陷就是必须要知道已知的元素的width 和height。不然没有办法拉回宽度的一半。

下面我们就来介绍一下如何在不知道width和height的情况下让元素水平垂直居中：

   #demo{
        border: 1px solid #000;
        background: red;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin:auto;
    }

这种方法及时改变width和height也不会改变居中。这种方式也可以叫做绝对居中的方式，同时这种方式也非常的好用。

最后我们介绍一种利用css3属性来实现垂直居中的方法：

#demo{
    position: absolute;  top: 50%;  left: 50%;    //上下移动屏幕的50%
    margin: auto;
    -webkit-transform: translate(-50%,-50%);      //减去自身的50%（多移动的）
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);  
}

这种利用css3属性的方法大家都知道，最大的问题就是浏览器的兼容问题，老版本的浏览器是一定不支持的，所以这种方法只能适用于主流的新版本浏览器。

通过上面的学习相信大家也有一点清楚明了了，第一种和第三种方法都是通过设置定位来实现的，其实原理基本相同，都是定位后设置left和top为50%，之后在拉回高宽的一半。

而第二种方法却不同，这种方法在特定的需求（我曾经做过一个移动的相册）中就会让语法更加清楚明了，同时只要html和css结构设计的好也会节省很多js的代码量的，更易于项目的后期维护。