關於各類居中問題

一、文本水平居中

text-align:center;

二、塊級元素水平居中

margin:0 auto;

三、單行文本垂直居中：設置height與line-height相同便可

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

四、多行文本垂直居中：

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>

五、未知高度div(固定定位 絕對定位) 垂直水平居中

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

六、已知高度div(固定定位 絕對定位) 垂直水平居中

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

 

 

第一次寫博客，有什麼問題請包涵