CSS总结（六）——元素的垂直居中（已知高度/未知高度）

元素的垂直居中

 1、已知高度宽度元素的水平垂直居中

 

    ①  绝对定位居中

         .center{

                    margin:auto;

                    position:absolute;

                    top:0;

                    left:0;

                    bottom:0;

                    right:0;

                  }

 

    ②  绝对定位与负边距实现

         .center{

                    width:100px;

                    height:100px;

                    position:absolute;

                    top:50%;

                    left:50%;

                    margin:-50px 0 0 -50px;

                  }

 

2、未知高度宽度元素的水平垂直居中

    ①  当元素为inline 或 inline-block时

         #content {

                       display：table-cell；         //表格单元格显示         

                       text-align：center；         //文本水平居中对齐

                       vertical-align：middle；    //元素垂直居中对齐

                      }

         #center{ }

 

    ②  利用css3的 transform 

         # content {

                         position:relative;

                        }

         #center {

                        position:absolute;

                        top:50%;

                        left:50%;

                        transform:translate(-50%,-50%);     //定义2D转换

                       }

 

   ③   利用css3的 flex 布局  — CSS3 flex容器，所有子元素为容器成员（火狐、谷歌支持）

         #content{

                      display：flex；

                      justify-content：center；   //在主轴上居中对齐

                      align-items：center；        //在交叉轴上居中对齐

                      }

         #center{ }

 

ps：transform 和 flex 虽高效好用，但存在很多兼容问题。