CSS元素水平/垂直居中方法总结

一、水平居中

0、inline-block元素

以下方法均适用于inline-block。
因为inline-block兼容了inline，block的优点。

1、常规流中inline元素

如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现（eg:文本居中）

<style>
body {background: #DDD;
    text-align: center;
}
span {background: red;  
  display: inline-block;   /*或display: inline;*/
}
</style>
<body>
    <span>aaaaaa aaaaa</span>
</body>

效果图：
这里写图片描述

2、常规流中block元素（不适用于inline-block）

如果需要居中的元素为常规流中block元素，
1）为元素设置宽度，
2）设置左右margin为auto。
3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值

<body>
    <div class="content">
	    aaaaaa aaaaa
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */
        
        /* 加上 display: inline-block; 也行*/
        background: purple;
    }
</style>

效果图：
这里写图片描述

3、浮动元素（负外边距居中）

如果需要居中的元素为浮动元素，用负外边距居中法
1）为元素设置宽度，
2）position: relative;(或absolute)
3）浮动方向偏移量（left或者right）设置为50%，
4）浮动方向上的margin设置为元素宽度一半乘以-1

注：left: 0; right:0; top: 0; bottom: 0; 方法无效

<!--********** 左浮动居中 **********-->
<body>
    <div class="content">
	    aaaaaa aaaaa
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;
		padding:20px;
        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        /* 因为有padding，
			若为标准盒模型：则变为(width + padding*2)/2 
			若为IE盒模型：则变为width/2,
		这里是标准盒模型。
		*/ 
        /* 加上 display: inline-block; 也行*/ 
        margin-left: -270px;  /* 4 */

        background-color: red;
    }
</style>

效果图：
这里写图片描述

<!--********** 右浮动居中 **********-->
<body>
    <div class="content">
	    aaaaaa aaaaa
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: right;
		padding:20px;
        position: relative;   /* 2 */
        right: 50%;            /* 3 */
        margin-right: -250px;  /* 4 */
		
		/* 加上 display: inline-block; 也行*/
        background-color: red;
    }
</style>

4、绝对/相对定位元素

如果需要居中的元素为绝对（或相对）定位元素，

方法一：负外边距
1）为元素设置宽度，
2）偏移量设置为50%，
3）偏移方向外边距设置为元素宽度一半乘以-1

<body>
    <div class="content">
	    aaaaaa aaaaa
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;       /* 1 */
        position: absolute;
        left: 50%;           /* 2 */
        margin-left: -400px; /* 3 */
		
		/* 加上 display: inline-block; 也行*/
        background-color: red;
    }
</style>

方法二： left: 0; right:0; top: 0; bottom: 0;
1）为元素设置宽度，(该元素可以为inline或inline-block或block)
2）设置左右偏移量都为0,
3）设置左右外边距都为auto

如果你好奇为什么position:absolute和margin:auto连用会居中？
那么请点击这里
同理： top: 0; bottom: 0; 也可以实现上下居中

<body>
    <div class="content">
      aaaaaa aaaaa
    </div>
</body>

<style>
    body {background: #DDD;}
   .content {
        width: 800px;        /* 1 */
		/* 加上 display: inline-block或inline; 也行*/
        /*inline可以是因为用了绝对定位被自动转化为inline-block*/
        position: absolute;
        left: 0;              /* 2 */
        right: 0;             /* 2 */
        margin: 0 auto;       /* 3 */
        background-color: red;
    }
</style>

若上面代码，div没有设置宽度，则left:0;right:0;后，该div宽度会延展为父元素宽度（这里是全屏宽度）。
同理若div没有设置高度，则top:0;bottom:0;后，该div高度会延展为父元素高度（这里是全屏高度）。

二、垂直居中

1、inline元素

其父元素height与line-height大小一致即可。

<style>
body{background: #ccc;}
#one{
  width: 100px;
  height: 100px;
  background: red; 
  line-height: 100px;
  position: absolute;
  left: 50%;
}
#one span{  /* 不能为display: inline-block;*/
  height:30px;
  background: yellow;
}
</style>

<div id="one">
   <span>dsd</span>
</div>

效果：span元素实现了垂直居中
这里写图片描述

2、inline-block元素

父元素的height与line-height值相同
vertical-align:middle;

<style>
body{background: #ccc;}
.center{  
    width: 500px;  
    height:300px;  
    line-height: 300px;  
    
    background: red;
}  
.inner{  
     background: blue;  
     width: 300px;  
     height: 100px;  
     /*不能display: block； 可以display: inline；*/
     display: inline-block;  
     vertical-align: middle;  
 }  
</style>

<div class="center">  
    <div class="inner"></div>  
</div>

执行结果：
这里写图片描述

3、block 元素

将 block 转换为inline 或 inline-block ，再重复上面方法。

4、脱离了普通文档流

1）父元素position: relative/absolute
2）居中元素position: absolute;
3）居中元素top:0;bottom:0;
4）居中元素margin:auto 0;

<style>
body{background: #ccc;}
.center{  
    width: 500px;  
    height:300px;  
    position: relative; /*1*/ /*或position: absolute;*/
    background: red;
}  
.inner{  
    background: blue;  
    width: 300px;  
    height: 100px; 
    display: inline;    /*inline-block 或 block都可以*/ 
    position: absolute; /*2*/ /*relative不行*/
    top:0;              /*3*/
    bottom:0;           /*3*/
    margin:auto 0;      /*4*/
}  
</style>

<div class="center">  
    <div class="inner"></div>  
</div>

执行结果：
这里写图片描述

参考：盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

面试可能会问：父元素高度宽度都不确定，怎么实现垂直水平居中？

方法一：left/top + transform

<style type="text/css">
body{background: yellow;}
.modal {
    width: 200px;
    height: 200px;
    background: #000;
    /**主要代码*/
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>
<div class="modal"></div>

这里写图片描述