css 垂直水平居中总结

一、前言：

垂直居中有很多方式，我们要做的不是写出完美代码，而是在合适的情况下根据需求选择合适方式。

主要方式：

line-height
绝对定位
表格 display：table-cell

主要需求：

固定宽高
不固定宽高

主要兼容：

ie8+ 主流浏览器
ie6,7

二、行高

1. 利用行高与高度相同，实现单行文本居中

缺点：只能是单行文本

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style type="text/css">

     .d1{width: 200px;height: 200px;background-color: blue;line-height: 200px;}

     </style>

 </head>

 <body>

 <div class="d1">

     fdsfdsfdsfdfsfds

 </div>

 </body>

 </html>

效果预览

2.利用inline-block改进（推荐）

改变display属性，就可以是块元素了，vertical-align: middle;设置垂直属性

优点：自适应内容

兼容：>=ie8 + 主流

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <style type="text/css">

     .div1{

         width: 500px;height: 500px;

         background-color: blue;

         text-align: center;

         line-height: 500px;

     }

     .div2{

         display: inline-block;

         vertical-align: middle;

         width: 200px;

         height: 200px;

         background-color: red;

         /*通过 line-hight 来垂直居中  此法>= ie8*/

     }

 </style>

 <body>

     <div class="div1">

         <div class="div2">

         </div>

     </div>

 </body>

 </html>

效果预览

三、绝对定位

1.负margin

top，left 50%；margin -50%；

缺点：需固定宽高

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <style type="text/css">

     .div1{

         width: 500px;height: 500px;

         background-color: blue;

         position: relative;

     }

     .div2{

         position: absolute;

         width: 200px;

         height: 200px;

         background-color: red;

         top: 50%;

         left: 50%;

         margin-left: -100px;   /*此处为width的一半，所以应用此法，元素必须固定宽、高*/

         margin-top: -100px;

     }

 </style>

 <body>

     <div class="div1">

         <div class="div2">

             fdsfsdffdf

             fdsfdsfsdff

         </div>

     </div>

 </body>

 </html>

效果预览

2.css3 translate

我们希望实现不固定宽高，在上法上改进。可以用js，动态添加宽高，但不推荐。其实可以用css3 translate属性，因为translate是唯一一个相对于自身宽度计算的属性

兼容：>=ie9 + 主流

优点：自适应内容

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <style type="text/css">

     .div1{

         width: 500px;height: 500px;

         background-color: blue;

         position: relative;

     }

     .div2{

         position: absolute;

         background-color: red;

         top: 50%;

         left: 50%;

         transform:translate(-50%,-50%);

         /*应用css3 translate属性是相对于自身的，此法>=ie9，且宽高自适应*/

     }

 </style>

 <body>

     <div class="div1">

         <div class="div2">

             fdsfsdffdf

             fdsfdsfsdff

         </div>

     </div>

 </body>

 </html>

效果预览

3.绝对定位 + 相对定位（推荐）

思想与上面的方式是一样，只是这是基于ie6,7的bug，相对定位位移父元素的50%

缺点：多添加一个容器标签

优点：自适应内容

兼容：ie6,7

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style type="text/css">

         .middle-demo-4{

         background-color: blue;

         height: 300px;

         width: 300px;

         position: relative;

         }

         .middle-demo-4 div{

         position: absolute;

         top: 50%;

         left: 50%;

         }

         .middle-demo-4 div div{

             height: 200px;

             background-color: red;

         position: relative;

         top: -50%;

         left: -50%;

         }/*ie6 ie7*/

     </style>

 </head>

 <body>

 <div class="middle-demo-4">

     <div>

         <div>dsfdsfdsfdsfdsfdsfdsf</div>

     </div>

 </div>

 </body>

 </html>

4.margin：auto

绝对定位下，固定宽高，top：0，bottom：0，会自适应内容，多余部分会用margin填充

缺点：固定宽高

兼容：>=ie8

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <style type="text/css">

     .div1{

         width: 500px;height: 500px;

         background-color: blue;

         position: relative;

     }

     .div2{

         margin: auto;

         position: absolute;

         background-color: red;

         width: 200px;

         height: 200px;

         left: 0;

         right: 0;

         top: 0;

         bottom: 0;

     }

 </style>

 <body>

     <div class="div1">

         <div class="div2">

             fdsfsdffdf

             fdsfdsfsdff

         </div>

     </div>

 </body>

 </html>

结果预览

四、表格

1.table-cell（推荐）

单元格可以设置垂直属性 vertical-align: middle;

优点：自适应内容

兼容：>=ie8 +主流

缺点：子元素为浮动、绝对定位无效（注意）

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <style type="text/css">

     .div1{

         width: 500px;height: 500px;

         background-color: blue;

         display: table-cell;

         vertical-align: middle;

         text-align: center;

     }

     .div2{

     /*float: left;position: absolute; 子元素为浮动、绝对定位无效

         此法>=ie8

     */}

 </style>

 <body>

     <div class="div1">

         <div class="div2">

             fdsfsdffdf

             fdsfdsfsdff

         </div>

     </div>

 </body>

 </html>

结果预览

五、总结

根据兼容性和自适应内容来考虑表格/行高法 + 相对定位法

如果固定宽高负margin法