我們?cè)谠O(shè)計(jì)頁(yè)面的時(shí)候，經(jīng)常要把DIV居中顯示，而且是相對(duì)頁(yè)面窗口水平和垂直方向居中顯示，如讓登錄窗口居中顯示。
到現(xiàn)在為止，探討了很多種方法。
HTML：
XML/HTML Code
1.<body>
2. <div class="maxbox">
3. <div class="minbox align-center"></div>
4. </div>
5.</body>
6.
效果圖（下面幾種方法效果圖一樣）：
第一種： CSS絕對(duì)定位
主要利用絕對(duì)定位，再用margin調(diào)整到中間位置。
父元素：
CSS Code
1..maxbox{
2. position: relative;
3. width: 500px;
4. height: 500px;
5. margin: 5px;
6. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
7.}
8.
子元素：
CSS Code
1..minbox{
2. width: 200px;
3. height: 200px;
4. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
5.}
水平垂直居中對(duì)齊：
CSS Code
1..align-center{
2. position: absolute;
3. left: 50%;
4. top: 50%;
5. margin-left: -100px; /*width/-2*/
6. margin-top: -100px; /*height/-2*/
7.}
第二種： CSS絕對(duì)定位 + Javascript/JQuery
主要利用絕對(duì)定位，再用Javascript/JQuery調(diào)整到中間位置。相比第一種方法，此方法提高了class的靈活性。
父元素：
CSS Code
1..maxbox{
2. position: relative;
3. width: 500px;
4. height: 500px;
5. margin: 5px;
6. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
7.}
8.
子元素：
CSS Code
1..minbox{
2. width: 200px;
3. height: 200px;
4. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
5.}
水平垂直居中對(duì)齊：
CSS Code1..align-center{
2. position: absolute;
3. left: 50%;
4. top: 50%;
5.}
6.
JQuery：
JavaScript Code
1.$(function(){
2. $(".align-center").css(
3. {
4. "margin-left": ($(".align-center").width()/-2),
5. "margin-top": ($(".align-center").height()/-2)
6. }
7. );
8.});
9.
第三種： CSS3絕對(duì)定位 + 位移
使用絕對(duì)定位與CSS3的 transform: translate同樣也可以達(dá)到效果。
父元素：
CSS Code
1..maxbox{
2. position: relative;
3. width: 500px;
4. height: 500px;
5. margin: 5px;
6. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
7.}
8.
子元素：
CSS Code
1..minbox{
2. width: 200px;
3. height: 200px;
4. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
5.}
6.
水平垂直居中對(duì)齊：
CSS Code
1..align-center{
2. position: absolute;
3. top: 50%;
4. left: 50%;
5. -webkit-transform: translate(-50%, -50%);
6. -moz-transform: translate(-50%, -50%);
7. transform: translate(-50%, -50%); /*向左向上位移*/
8.}
9.
第四種： Flexbox: [伸縮布局盒模型]
要讓元素水平垂直，對(duì)于Flexbox模型來(lái)說(shuō)太容易了。
這里得改變一下HTML：
XML/HTML Code
1.<div class="maxbox align-center">
2. <div class="minbox"></div>
3.</div>
4.
父元素：
CSS Code
1..maxbox{
2. position: relative;
3. width: 500px;
4. height: 500px;
5. margin: 5px;
6. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
7.}
8.
子元素：
C# Code
1..minbox{
2. width: 200px;
3. height: 200px;
4. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
5.}
水平垂直居中對(duì)齊：
CSS Code
1..align-center{
2. display: flex;
3. display: -webkit-flex; /*兼容問(wèn)題*/
4. justify-content: center;
5. align-items: center;
6.}
幾種方法的比較：
第一種CSS絕對(duì)定位margin調(diào)整，兼容性很好但是欠缺靈活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要寫(xiě)不同的 .align-center 。
第二種使用腳本語(yǔ)言，兼容性很好且彌補(bǔ)了第一種的缺點(diǎn)。不因width，height的改變而影響水平垂直居中的效果。
第三種使用CSS3的一些新的屬性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改變而影響水平垂直居中的效果。
使用Flexbox模型，兼容Firefox、Opera 和 Chrome，IE全軍覆沒(méi)。也是不因width，height的改變而影響水平垂直居中的效果。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：