div+css：頁面總體佈局居中顯示：上下居中||垂直居中，左右居中||水平居中

時間 2019-11-11

標籤 div+css div css 頁面總體佈局居中顯示上下垂直左右水平欄目 HTML 简体版

原文原文鏈接

如何實現總體居中顯示：

若是要實現總體頁面上下居中，在<body>標籤中加了個class，<body class="mainLayout"> 而後對mainLayout進行設置： css

.mainLayout {
    position:absolute;
    left:50%;
    top:50%;
    width:910px; /*你的實際頁面的寬度*/
    margin-top:-270px;  
    margin-left: -455px; /*455爲總體width(這裏是910)的一半*/
}

這是使用絕對定位和負margin值實現的。 chrome

left:50% 會讓整個mainlayout容器從瀏覽器水平方向的中點開始往右顯示，此時瀏覽器左邊的一半是空的。瀏覽器

而後設置 margin-left爲mainlayout容器的一半，設置爲負值是讓容器能再向左移動，也就是將整個容器從瀏覽器中點往左邊挪動它（mainlayout容器）自己的一半。這樣mainlayout容器恰好就可以左右居中顯示了。 spa

上下居中顯示的原理同樣：先top：50%讓容器從垂直方向的中點向下顯示，上面空出一半。而後再向上移動mainlayout容器的一半，使之垂直居中。 code

這樣子的實現貌似兼容全部瀏覽器哦~（我自測了chrome ff ie7-10） it

小結：

以前大概知道這個方法，但沒有弄明白原理。今天碰到了這個任務，也終於看懂了，就索性廢話一堆的記錄下來，爲那些和我同樣糊里糊塗的孩子。(*^__^*) io

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。