关于各种居中问题

1、文本水平居中

text-align:center;

2、块级元素水平居中

margin:0 auto;

3、单行文本垂直居中：设置height与line-height相同即可

height:40px;
line-height:40px;

4、多行文本垂直居中：

CSS：

#wrap{ 
    height:400px; 
    display:table; 
} 
#content{ 
    vertical-align:middle; 
    display:table-cell; 
    border:1pxsolid#FF0099; 
    background-color:#FFCCFF; 
    width:760px; 
} 

HTML：

<div id="wrap">
    <div id="content">多行文本</div>
</div>

5、未知高度div(固定定位 绝对定位) 垂直水平居中

div{
    position: fixed; //position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

6、已知高度div(固定定位 绝对定位) 垂直水平居中

div{
    position: fixed; //position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:200px;
    margin-left: -100px;
    margin-top: -100px;
}

 

 

第一次写博客，有什么问题请包涵