CSS 水平居中

時間 2019-11-24

標籤 css 水平居中欄目 CSS 简体版

原文原文鏈接

你不知道的那些事:

一、absolute：

相對最近的除了position：static以外的父元素偏移。默認：停留在父元素的content區域內！！

可是！！！其實absolute的~~活動區域是父元素的padding+content~~，並不只限於父元素，只是起點在父元素內的左上角。設置left：0，top:0;就發現和默認的不一致了！！！（默認不等同於left：0；top:0;）瀏覽器

因此，當你發現下文中提到的left:50%;它是父元素padding+content長度的50%！！切記！！！佈局

二、relative：

相對本身原來的位置偏移。活動範圍是~~父元素的content區域~~，這句話說得不對，活動範圍沒人能攔得住它，並不只限於父元素，可是當偏移量取值是百分比時，就是相對父元素的content取值了好比left：50%也就是父元素的content的50%。code

三、fixed：

相對可視窗口偏移。活動範圍是整個可視窗口，left：50%通常也就是瀏覽器可視窗口的50%啦。blog

正文:

1. 行內元素text-align:center

若是被設置元素爲文本、圖片等行內元素時，水平居中是經過給父元素設置 text-align:center 來實現的。圖片

<body>
      <div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>
<style>
  .txtCenter{
    text-align:center;
  }
</style>

2. 定寬塊狀元素

a. 設置「左右margin」值爲「auto」來實現居中的。it

<body>
      <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。
</div>
</body>         
<style>
     div{  
     border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/    
     width:200px;/*定寬*/
     margin:20px auto;/*margin-left 與 margin-right 設置爲 auto */
 }
</style>

也能夠寫成：io

margin-left:auto;
  margin-right:auto;

注意：元素的「上下 margin」是能夠隨意設置的。
分析：
一、此方法居中只適用於佔滿一行的塊狀元素，不適用於inline-block。設置width只是content的寬度，加上padding、border和margin之後的整個塊佔滿一行，所以設置margin auto可使之居中。因此float浮動元素也不適用該方法。
二、absolute/fixed狀況時，設置left:0,right:0;就能夠把margin扯大啦！！（千萬記得設置寬度，否則就不是把margin扯大而是把content扯大啦！）
三、IE6下需在父元素上設置text-align: center;,再給子元素恢復須要的值。table

b. 設置元素爲absolute/relative/fixed，（1）偏移量（left或者right）設置爲50%，（2）margin設置爲元素寬度一半乘以-1。ast

<body>
    <div class="content"> aaaaaa aaaaaa a a a a a a a a </div>
</body>
  <style>
   body {
      position: relative;
   }
   .content {
      width: 800px;
      position: absolute;
      left: 50%;
      margin-left: -400px;
  }
 </style>

注意此時absolute是在父元素的padding+content中居中，50%是父元素padding+content的50%；
relative是在父元素的content中居中，50%是父元素的content的50%；
fixed是視圖居中，50%是可視窗口的50%，因此適用想要在瀏覽器居中的狀況。class

3. 不定寬塊狀元素方法

（1）加入 table標籤+左右 margin 居中

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

（2）設置 display:inline或者inline-block +父元素text-align:center

<body>
     <div class="container">
        <ul>
          <li><a href="#">1</a></li>
        </ul>
    </div>
</body>
<style>
  .container{
      text-align:center;
  }
  .container ul{
      list-style:none;
      margin:0;
      padding:0;
      display:inline-block;
  }
 </style>

（3）設置 position:relative 和 left:50%
前文提到的position和移動50%的方案都是基於定寬的，由於若是不定寬，就會被扯大！！毀掉了咱們的佈局！
有些同窗說我就是不想設定寬度，也不想加table，也不想把塊狀元素變成行內元素怎麼辦？
噹噹噹！！
給本身添加一層父元素，讓父元素牢牢的抱（包）住本身（給父元素設置float或者inline-block），使得父元素和本身同樣寬，而後給父元素設置relative和 left:50%，讓父親帶着本身飛，飛多遠呢？答：飛父親的父親也就是爺爺的content的50％。而後子元素設置 position:relative 和 left: -50% 本身單飛，這個時候飛父親的50%，其實也就是本身的50%，由於本身和父親同樣大。從而來實現水平居中。

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
    </ul>
</div>
</body>
<style>
.container{
    float:left;
    position:relative;
    left:50%
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:-50%;
}
</style>

相關標籤/搜索

每日一句

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