關於CSS製做水平/垂直居中對齊問題

時間 2019-11-06

標籤關於 css 製做水平垂直居中對齊問題欄目 CSS 简体版

原文原文鏈接

做爲前端開發者，在製做Web頁面時都有碰到CSS製做水平垂直居中的問題，我想你們都有研究過或者寫過，特別是其中的垂直居中，更是讓人煩惱。這段時間，我收集了幾種不一樣的方式製做水平/垂直居中方法，我會將這幾種方法分別介紹給你們，以供你們參考。或許對於像咱們這樣的初學者來講會有必定的幫助。css

1、水平居中：html

1.margin:0 auto前端

這種方法主要使用margin: 0 auto配合元素的width來實現水平居中的效果；使用該方法實現元素水平居中必定要讓元素知足兩個條件：其一，元素須要有一個固定寬度值；其二元素的margin-left和margin-right都必須設置爲auto，這兩個條件少了任何一個都沒法讓元素達到水平居中的效果。css3

 div{
    width:400px;
    margin:0 auto;
}

此方法使用水平居中，支持全部瀏覽器運行，是你們用得比較多，並且也是最經常使用、也是最湊效的方法。web

2.text-align:center瀏覽器

這種方法主要是針對單行文本居中或者table格式居中，主要運用的是text-align:center讓元素水平居中；佈局

body{text-align: center;

該方法text-align有三個屬性值：left|center|right，分別對應向左對齊，居中對齊，向右對齊，比較經常使用，推薦。字體

3.<center></center>(不建議使用)flex

對於html4中已經淘汰的center標籤，照樣能夠作到水平居中對齊，可是不建議使用；spa

4.position定位

對於定位也是經常使用的，在這裏固然也能夠採用定位的方法來實現水平居中：

body{
    position:absolute;
    left:50%;
}

採用定位居中雖然經常使用，在使用過程當中要計算偏移值，才能準確實現水平居中。

5.margin/padding

該方法對於div塊中的水平居中對其，就是試着調：margin和padding，使用恰當合適的位置，會實現水平居中對其效果。

6.display:inline-block

有時使用display:inline-block來實現水平居中，也有效果哦，但要使用這個就得在其父元素上設置text-align.

 body{
    text-align:center;
}
.content{
    display:inline-block;
}

7.css3提供的彈性盒模型

彈性盒模型做爲css3新引入的盒模型，可以輕鬆地建立自適應瀏覽器窗口的流動佈局或自適應字體大小的彈性佈局，對於它的實現原理你們能夠經過下面的代碼能夠初步認識，要觸發彈性盒模型適用 display: box，「box-orient」定義分佈的座標軸：vertical（垂直分佈）和horizional（水平分佈），默認狀況下，盒子並不具備彈性，若是box-flex的屬性值至少爲1時，則變得富有彈性。若是盒子不具備彈性，它將盡量的寬使其內容可見，且沒有任何溢出，其大小由「width」和「height」來決定（或min-height、min-width、max-width、max-height）

<style type="text/css">    
        body{    
           display: box;    
          box-orient: horizontal;    
        }    
       #box1 {    
           box-flex: 2;    
        }    
        #box2 {    
            box-flex: 1;    
        }    
        #box3 {    
            box-flex: 1;    
        }    
    </style>    
    <body>    
        <div id="box1">1</div>    
        <div id="box2">2</div>    
        <div id="box3">3</div>    
    </body>

8.負外邊距（margin-left：-(width/2)px）

負外邊距一樣能夠解決水平居中對其的問題，可是要用到絕對定位（position：absolute;）；

.divr{backgrond-color: #000;position: absolute;left: 50%;width: 1000px;margin-left: -500px;}

9.css3中的fit-content

fit-content是CSS3中給width屬性新加的一個屬性值，它配合margin可讓咱們輕鬆的實現水平居中的效果；

<style type="text/css">    
       .page ul { 
            width: -moz-fit-content;width:-webkit-fit-content;
            width: fit-content;margin-left: auto;    
 
      .page li {      
             line-height: 25px;margin: 0 5px;float: left;    
      }    
        .page a {      
             display: block;color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;padding: 0 10px;border-radius: 2px;    
             box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;    
             background: linear-gradient(top,#434345,#2f3032);    
       }    
        .page a:hover {      
              text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;    
              background: linear-gradient(top,#f48b03,#c87100);    
        }    
    </style>    
    <div class="page">    
      <ul>    
        <li><a href="#">Prev</a></li>    
        <li><a href="#">1</a></li>    
        <li><a href="#">2</a></li>    
        <li><a href="#">3</a></li>    
        <li><a href="#">4</a></li>    
        <li><a href="#">5</a></li>    
        <li><a href="#">Next</a></li>    
      </ul>    
    </div>

10.css3中的flex

CSS3中的flex是一個很強大的功能，它能讓咱們的佈局變得更加靈活與方便，並且它的實現至關便捷，擴展性強，惟一的缺點就是目前瀏覽器的兼容性較差。

<style type="text/css">    
         .page {      
            display: -webkit-box;    
            -webkit-box-orient: horizontal;-webkit-box-pack: center;display: -moz-box;    
            -moz-box-orient: horizontal;-moz-box-pack: center; 
            display: -o-box;-o-box-orient: horizontal;    
     -o-box-pack: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;    
           display: box;box-orient: horizontal;box-pack: center;    
       }    
        .page li {      
              line-height: 25px;margin: 0 5px;float: left;    
       }    
       .page a {      
              display: block;color: #f2f2f2;
             text-shadow: 1px 0 0 #101011;
            padding: 0 10px;border-radius: 2px;    
             box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
            background: linear-gradient(top,#434345,#2f3032);    
       }    
        .page a:hover {      
             text-decoration: none;box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;    
             background: linear-gradient(top,#f48b03,#c87100);    
       }      
   </style>    
 <div class="page">    
      <ul>    
       <li><a href="#">Prev</a></li>    
        <li><a href="#">1</a></li>    
        <li><a href="#">2</a></li>    
       <li><a href="#">3</a></li>    
        <li><a href="#">4</a></li>    
       <li><a href="#">5</a></li>    
       <li><a href="#">Next</a></li>    
      </ul>    
    </div>

2、垂直居中：

1.line-height行高

該方法能實現垂直居中，但只能是單行文本居中（可適用於全部瀏覽器）：

.content{
   height:100px;
   line-height:100px; 
}

2.position定位

該方法跟水平居中同樣，垂直居中也能夠採用定位的方法，但它的缺點是當沒有足夠的空間時，元素會消失。

.content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

或者是：

.content{
    position:absolute;
    top:50%;
}

3.float浮動

固然咱們一樣能夠設置flaot浮動來達到垂直劇居中的效果，對於浮動，咱們須要在以後清除，並顯示在中間。

.content{
    float:left;
     height:50%;
     margin-bottom:-120px;
}
.footer{
    clear:both;
    height:240px;
    position:relative;
}

4.vertical-align: middle

vertical-align屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。該方法能夠隨意改變元素高度，但在IE8中無效。

.content{
    display:table-cell;
    vertical-align:middle;
}

上面主要是收集了多種方法讓元素實現垂直居中，你們能夠在這幾種方法上稍作改變就能實現其水平居中，這樣就達到了元素水平垂直居中的效果。實現方法不少，你們能夠根據須要選擇不一樣的方法。以上是我收集並總結的部分方法，僅供參考，但願能給須要的朋友有所幫助。

相關標籤/搜索

每日一句

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