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

### 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;
            /*由于觸發(fā)了BFC規(guī)范，可以解決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.使用定位實現(xiàn)盒子的居中

```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布局實現(xiàn)居中

```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.網(wǎng)格布局實現(xiàn)居中

```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">網(wǎng)格居中</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>
```

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