css 元素水平居中

1. 定寬行內元素居中：text-align:center

2. 定寬塊級元素居中：auto

        .center{
           border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
           width:500px;/*定寬*/
           margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
         }
       <div class="center">
           塊級元素水平居中
       </div>

3. 不定寬塊級元素水平居中

   1）加入 table 標籤

   第一步：爲需要設置的居中的元素外面加入一個 table 標籤 ( 包括 、、 )。
   第二步：爲這個 table 設置“左右 margin:auto”（這個和定寬塊狀元素的方法一樣）。

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

   2）設置 display;inline 方法

   改變塊級元素的 dispaly 爲 inline 類型，然後使用 text-align:center 來實現居中效果.

   
          .container1{
            text-align:center;
          }
          .container1 ul{
            list-style:none;
            margin:0;
            padding:0;
            display:inline;
          }
          .container1 li{
            margin-right:8px;
            display:inline;
          }
       <div class="container1">
         <ul>
           <li><a href="#">1</a></li>
           <li><a href="#">2</a></li>
           <li><a href="#">3</a></li>
         </ul>
       </div>
   

   3）設置 position:relative 和 left:50%;

   通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，
   子元素設置 position:relative 和 left:-50% 來實現水平居中。

   
           .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;}
     <div class="container">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </div>