一、文本水平居中web
text-align:center;
二、塊級元素水平居中spa
margin:0 auto;
三、單行文本垂直居中:設置height與line-height相同便可code
height:40px;
line-height:40px;
四、多行文本垂直居中:orm
CSS:blog
#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(固定定位 絕對定位) 垂直水平居中it
div{ position: fixed; //position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
六、已知高度div(固定定位 絕對定位) 垂直水平居中io
div{ position: fixed; //position: absolute; top: 50%; left: 50%; width:200px; height:200px; margin-left: -100px; margin-top: -100px; }
第一次寫博客,有什麼問題請包涵table