關於CSS中的水平/垂直居中問題

時間 2019-11-07

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

原文原文鏈接

關於css中的水平、垂直居中問題，我想你們也常常遇到過，並且這也是實用性比較高的用法，那麼究竟有多少種方法呢？這邊編者就作個小小的總結，有什麼不足之處，還望你們多多指出。。。css

1、橫向居中：html

1.margin: 0 auto;css3

這個是你們用得比較多，並且也是最經常使用、也是最湊效的方法，並且在大多數主流瀏覽器中，這種方法都很是有效，即便是Windows平臺上的IE6，在其標準兼容模式(compliancemode)下也可以正常顯示。（例以下面的類選擇器[container]的居中,1和2是同樣的效果）web

/*1*/
.container{margin: 0 auto;}
/*2*/
.container{margin-left: auto;margin-right: auto;}

2.text-align:center;瀏覽器

該方法對於處理文本元素居中問題，至關hack，由於它能兼容大多數瀏覽器，並且設置到body元素上便可(text-align有三個屬性值：left|center|right，分別對應向左對齊，居中對齊，向右對齊)app

body{text-align: center;}

可是當咱們在body設置text-align以後，body全部的子孫元素都會居中，因此咱們能夠經過設置text-align：left讓其中的文本回到默認的向左對齊佈局

p{text-align: left;}

3.<center></center>(不建議使用);字體

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

<center></center>

4.position;spa

對於定位能夠作到居中，我相信你們都知道，只是它不是很智能，要通過咱們簡單計算，才能得出來偏移的位移值，好比body的寬度是100%，一個div塊的寬度是a，那麼left的值就是（1-a)/2;

body{background: #000;position: relative;}
div{background-color:#cf9;position: absolute;width: 40%;height: 90px;left: 30%}

5.margin/padding;

對於某些小的div塊中的居中問題，咱們能夠試着調margin和padding，這其實也算是一個小技巧，若是你運用的恰當，你會有意外發現的，至關好用，你值得嘗試！！！

6.比較囧的方法（一個div塊擠過去）;

呵呵呵，這個方法估計比較弱智，可是照樣可以達到效果，鄧爺爺不是說過麼：「無論白貓黑貓，能抓到老鼠的就是好貓」，一樣無論你東拼西湊，仍是咋的，能達到預期的效果就ok!(例如div2吧div1擠過去)

div2{width: 30%;float: left;}
div1{width: 40%;float: left;}

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;），雖然該方法不是首選的方法，但也是一個不錯的解決方案，並且適用性極廣，那個作到大多數的瀏覽器的兼容問題

.container{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;
          margin-right: 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(行高);

對於垂直居中，line-height是你們最新熟悉的方法了，也是最方便、快捷的方法，同時又能作到很好的瀏覽器的兼容問題

<style type="text/css">
    .page{width: 100%;height: 100px;background: #000;line-height: 100px;}
</style>
<div class="page">
  <span>hello line-height!</span>
</div>

2.position(定位);

position對於咱們來講，那是至關的好用，使用定位固然能夠作到垂直居中

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

3.margin/padding;

咱們能夠設置margin-top/padding-top來達到垂直劇居中的效果，不要考慮div的高度

.div{width: 100px;height: 40%;background-color: red;margin-top:30%}

4.vertical-align: middle;

vertical-align屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。容許指定負長度值和百分比值,這會使元素下降而不是升高,在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式

<div id="wrapper"> 
    <div id="cell"> 
        <div class="content"> 
          Content goes here
        </div> 
    </div> 
</div> 
#wrapper {display:table;} 
#cell {display:table-cell; vertical-align:middle;}

相關標籤/搜索

每日一句

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