對于前端攻城獅，最重要的就是頁面，頁面的好看程度直接影響咱們的產品效益，所以，接下來呢我就給大家總結一下咱們前端攻城獅常用的居中效果的幾種實現方法:

### 1.文字的垂直水平居中

```css
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            color: white;
            /*行高等于盒子的高度，完成垂直居中*/
            line-height: 200px;
            /*元素的水平居中*/
            text-align: center;
        }
    </style>

    <div>垂直水平居中</div>
```

ps:以上方法僅針對文字的水平居中

### 2.盒子的垂直水平居中

```css
       .outer{
           width: 300px;
           height: 300px;
           background-color: gainsboro;
           text-align: center;
           line-height: 100px;
            /*由于觸發了BFC規范，可以解決margin塌陷，完成垂直的居中*/
           overflow: hidden;
           margin: 0 auto;
       }
       .inner{
           width: 100px;
           height: 100px;
           background-color: pink;
           margin: 100px auto;
       }

       <div class="outer">
           <div class="inner">盒子居中</div>
       </div>
```

### 3.圖片在盒子中的居中

```text
     .box{
          width: 300px;
          height: 300px;
          border: 1px dotted blue;
          margin: 0 auto;
          line-height: 400px;
          text-align: center;
      }

     <div class="box">
         <img src="./happy.png" alt="">
     </div>
```

ps:圖片的特殊的文本類型，所以使用普通文本的垂直水平居中方法即可完成圖片的居中，需要注意圖片的大小一定要小于盒子的一半，否則效果不明顯。

### 4.使用定位實現盒子的居中

```css
    .outer{
        width: 300px;
        height: 300px;
        background-color: #fcfdcd;
        position: relative;
    }
    .inner{
        width: 100px;
        height: 100px;
        background-color: #00ffcd;
        text-align: center;
        line-height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        /*由于定位是以元素左上角為起始點，所以此時需要向上向左移動盒子的大小的一半*/
        margin-top: -50px;
        margin-left: -50px;
    }

    <div class="outer">
        <div class="inner">定位居中</div>
    </div>
```

### 5.使用flex布局實現居中

```css
    .outer{
        width: 300px;
        height: 300px;
        background-color: #d3d60e;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .inner{
        color: #fff;
        width: 100px;
        height: 100px;
        background-color: #13b86b;
        text-align: center;
    }

    <div class="outer">
        <div class="inner">flex居中</div>
    </div>
```

### 6.網格布局實現居中

```css
        .outer {
            width: 300px;
            height: 300px;
            background-color: gainsboro;
            text-align: center;
            line-height: 100px;
            display: grid;
            grid-template-columns: repeat(3,100px);
            grid-template-rows: repeat(3,100px);
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: pink;

        }

    <div class="outer">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="inner">網格居中</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
```

### 7.元素在當前瀏覽器中垂直水平居中

```css
    body{
        background-color:gray;
    }
    .box {
            width: 400px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
     }

     <div class="box">瀏覽器中垂直水平居中</div>
```

### 說明：以上幾種方法是對于頁面中的布局中較為常用的方法，后期還會持續更新，敬請關注。更多關于“html5培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。