CSS：從居中開始

如下代碼均爲本人親手實踐過，但願讀者朋友們可以動手實踐一下。

1、水平居中

1.行內元素水平居中。

能夠經過text-align:center,實現塊級元素包裹的行內元素居中.

.parent {
            text-align: center;
        }
複製代碼

若是塊級元素包裹着塊級元素，能夠經過display:inline-block，使塊級元素轉換成行內塊元素，再使其居中。

<div class="parent">
            <div class="child">
                demo
            </div>
   </div>

 .parent {
            text-align: center;
        }
  .child {
            display: inline-block;
         }
複製代碼

2.塊級元素水平居中

（1）

.parent {
             /* 定寬 */
             width: 100px;
             margin: 0 auto;
         }
複製代碼

（2）table+margin

​ 先將子元素設置爲塊級表格來顯示，再將其設置爲水平居中

<div class="parent">
            <div class="child">
                demo
            </div>
 </div>
 
  <style>
         .child {
             display: table;
             margin: 0 auto;
         }
 </style>
複製代碼

（3）absolute+margin

先將父元素設置爲相對定位，再將子元素設置爲絕對定位，向右移動子元素，移動的距離爲父元素的一半，最後經過向左移動子元素的一半寬度，使其水平居中。

.parent {
            position: relative;
        }
  .child {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
   }
複製代碼

（4）flex+justify-content

.parent {
            display: flex;
            /* 主軸元素對齊方式 */
            justify-content: center;
  }
         
複製代碼

(5) flex+margin

.parent {
        display: flex;
         }

.child {
         margin: 0 auto;
}
複製代碼

3.多塊級元素水平居中

父級元素採用flex佈局，主軸上採用center,水平居中的方式排列

<div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
 </div>
 <style>
        .container {
            display: flex;
            justify-content: center;
        }
         
  </style>
複製代碼

子級元素採用display:inline-block,父級元素使用text-align:center居中，實現水平居中

<style>
        .container {
            text-align: center;
        }
        
        .child {
            display: inline-block;
        }
    </style>
複製代碼

4.浮動元素水平居中

<style>
      .parent {
        display: flex;
        justify-content: center;
      }
      .chlid {
        float: left;
        width: 200px; 
      }
</style>

<div class="parent">
      <span class="chlid">我是要居中的浮動元素</span>
</div>
複製代碼

2、垂直居中

1.單行內聯元素垂直居中

<div class="parent">
        <span class="child">單行內聯元素垂直居中</span>
 </div>
 
 <style>
        .child {
            height: 120px;
            line-height: 120px;
            border:1px solid #ccc;
        }
    </style>
複製代碼

2.多行內聯元素垂直居中

flex佈局

<div class="parent">
        <span class="child">春天的江潮水勢浩蕩，與大海連成一片，一輪明月從海上升起，好像與潮水一塊兒涌出來。
                月光照耀着春江，隨着波浪閃耀千萬裏，全部地方的春江都有明亮的月光。
                江水曲曲折折地繞着花草叢生的原野流淌，月光照射着開遍鮮花的樹林好像細密的雪珠在閃爍。</span>
</div>
<style>
        .parent {
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border: 1px solid #ccc;
        }
</style>

複製代碼

利用表佈局

<style>
        .parent {
            display: table;
            height: 140px;
            border: 1px solid #ccc;
        }
        .child {
            display: table-cell;
            vertical-align: middle;
        }
 </style>
複製代碼

3.塊級元素垂直居中

（1）flex+align-items

<style>
        .parent {
            height: 200px;
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
        }
</style>
 <div class="parent">
        <div class="child">未知高度的塊級元素垂直居中。</div>
 </div>
複製代碼

(2) 使用absolute+transform

<style>
      .parent {
        position: relative;
        height: 200px;
        border: 1px solid #333;
      }
      .chlid {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    </style>
<div class="parent">
    <div class="child">未知高度的塊級元素垂直居中。</div>
</div>

複製代碼

(3)display:table-cell vertical-align:center

MDN:CSS屬性 vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。

<style>
       .parent {
         height: 100px;
         border: 1px solid #333;
         display: table-cell;
         vertical-align: middle;
       }
 </style>
 <div class="parent">
      <div class="chlid">未知高度的垂直居中塊級元素</div>
 </div>
複製代碼

3、水平垂直居中

（1）絕對定位與負邊距

<style>
        .parent {
            height: 800px;
            position: relative;
            border: 1px solid #ccc;
        }

        .child {
            position: absolute;
            width: 400px;
            height: 400px;
            left: 50%;
            top:50%;
            margin-left: -200px;
            margin-top: -200px;
            background-color: #ccc;
        }
    </style>
    
     <div class="parent">
        <div class="child">已知高度寬度的塊級元素水平垂直居中。			</div>
    </div>
複製代碼

（2）margin auto

​ 這種方法不須要知道塊級元素的高寬，但在IE瀏覽器會有兼容問題

<div id="parent">
      <div id="child" style="width: 100px;height: 100px;background-color: #666">
        未知高寬的塊級元素水平垂直居中
      </div>
</div>
 #parent {
        position: relative;
        height: 400px;
        border: 1px solid #ccc;
      }

      #child {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
複製代碼

(3) transform

<style>
      #parent {
        position: relative;
        height: 400px;
        border: 1px solid #ccc;
      }

      #child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    </style>
    
   <div id="parent">
      <div id="child" style="width: 100px;height: 100px;background-color: #666">
        未知高寬的塊級元素水平垂直居中
      </div>
    </div>
複製代碼

（4）flex佈局

<style>
        .parent {
            height: 200px;
            width: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
        }
 </style>
 
<div class="parent">
        <div class="child">未知高度的塊級元素水平垂直居中。</div>
</div>
複製代碼

(5)grid佈局

<style>
        .parent {
            height: 400px;
            display: grid;
            border: 1px solid #ccc;
        }

        .child {
            margin: auto;
        }
    </style>
    
    
    <div class="parent">
        <div class="child">未知高度寬度的塊級元素水平垂直居中。			</div>
    </div>
複製代碼

參考文章

• 如何居中一個元素（終結版）

• 【基礎】這15種CSS居中的方式，你都用過哪幾種？

• 最全面的水平垂直居中方案與flexbox佈局

• CSS3 Flexbox輕巧實現元素的水平居中和垂直居中

• 如何居中一個元素（正常、絕對定位、浮動元素)

• CSS佈局解決方案（終結版）

• 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定