CSS實現元素水平居中

時間 2019-12-04

標籤 css 實現元素水平居中欄目 CSS 简体版

原文原文鏈接

CSS實現元素水平居中

元素主要分爲塊級元素和行內元素，因此對元素進行水平居中也分這兩種狀況來討論，另外塊級元素的實現比較複雜，將分狀況討論。css

1、行內元素

經常使用行內元素爲a/img/input/span 等，標籤內的HTML文本也屬於此類。對於此類狀況，水平居中是經過給父元素設置 text-align:center來實現的。
HTML結構：html

<body>
  <div class="txtCenter">
    Hello World!!!
  </div>
</body>

CSS樣式：spa

<style>
  div.txtCenter{
    text-align:center;
  }
</style>

2、塊級元素

經常使用塊級元素爲div/table/ul/dl/form/h1/p等。根據應用場景不一樣又分爲定寬塊級與不定寬塊級兩種狀況，分別討論。code

1.定寬塊級元素

知足**定寬**和**塊狀**兩個條件的元素是能夠經過設置**「左右margin」值爲「auto」**來實現居中的。
HTML結構：orm

<body>
  <div>
    Hello World!!!
  </div>
</body>

CSS樣式：htm

<style>
  div{
    border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
    width:500px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
  }
</style>

2.不定寬塊級元素

咱們常常會遇到不定寬度塊級元素的使用，如分頁導航，由於分頁的數目不定，因此不能用寬度限制住。此時對元素進行水平居中主要有三種方式：input

加入 table 標籤it
設置 display;inline 方法io
設置 position:relative 和 left:50%;table

2.1加入 `table` 標籤

第一步：爲須要設置的居中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )。

第二步：爲這個 table 設置「左右 margin:auto」（這個和定寬塊狀元素的方法同樣）。
HTML結構：

<div>
  <table>
    <tbody>
      <tr><td>
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </td></tr>
    </tbody>
  </table>
</div>

CSS樣式：

<style>
  table{
    margin:0 auto;
  }
  ul{list-style:none;margin:0;padding:0;}
  li{float:left;display:inline;margin-right:8px;}
</style>

**這種方法的缺點是增長了無語義的HTML標籤，增長了嵌套深度

2.2設置 `display;inline` 方法

改變塊級元素的 dispaly 爲 inline 類型，而後使用 text-align:center 來實現居中效果。
HTML結構：

<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>

CSS樣式：

<style>
  .container{
    text-align:center;
  }
  .container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
  }
  .container li{
    margin-right:8px;
    display:inline;
  }
</style>

這種方法的缺點是將塊級元素的display設置爲inline，因而少了不少功能，好比盒子模型

2.3設置 `position:relative` 和 `left:50%;`

經過給父元素設置 float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。
HTML結構：

<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>

CSS樣式：

<style>
  .container{
    float:left;
    position:relative;
    left:50%
  }
  .container ul{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:-50%;
  }
  .container li{float:left;display:inline;margin-right:8px;}
</style>

這種方法能夠保留塊狀元素仍以 display:block 的形式顯示，優勢不添加無語議表標籤，不增長嵌套深度，但它的缺點是設置了 position:relative，帶來了必定的反作用。

三種方式各有利弊，根據實際狀況相應選用。