css水平垂直居中的几种方法

今天给大家提供一些脱离文档流的居中方法，大家可以收藏一下。

一、脱离文档流元素的居中

方法一：margin:auto法

css代码：

.box{     
       width:  400px;
       height: 400px;
       position: relative;
       border: 1px solid #ccc;
}
 .box img{
            width:200px;
            height: 100px;
            border: 1px solid #ccc;
            position: absolute;
            margin:auto;
            top:0;
            left:0;
            bottom:0;
            right:0;
        }

html代码：

<div class="box">
    ![](../images/paiban2.jpg)
</div>

效果图：

margin:auto;法水平垂直居.png

当一个元素绝对定位时，它会根据第一个不是static定位的祖先元素定位，因此这里的img根据外层div定位。

方法二：负margin法

css代码：

 .box{
            height: 400px;
            width: 400px;
            position: relative;
            left:auto;
            top:auto;
            border:1px solid  cornflowerblue;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position:absolute;
            left:0;
            top:0;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position:absolute;
            right:0;
            top:0;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-50px;
            margin-left:-50px;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position:absolute;
            bottom:0;
            left:0;
        }
        .box5 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position:absolute;
            bottom:0;
            right:0;
        }

html代码：

<div  class="box">
    <div  class="box1"></div>
    <div  class="box2"></div>
    <div  class="box3"></div>
    <div  class="box4"></div>
    <div  class="box5"></div>
</div>

效果图：

负margin法水平垂直居中.png

这里，我们首先用top: 50%;和left:50%;让box3的坐标原点（左上角）移动到box的中心，然后再利用负margin让它往左移自身宽度的一半，再往上移自身高度的一半，这样box3的中心点就跟box的中心点对齐了。