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 虽高效好用，但存在很多兼容问题。