【html+css】總結七種垂直水平居中的辦法

第一種：定位+cala（固定寬高）

<div class="box1">
      <div class="inner"></div>
</div>

css部分：

.box1{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

 .box1 .inner {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    /* 下麵這個減號兩邊要隔開一個空格 */
    top: calc(50% - 50px);
    left: calc(50% - 50px);
      }

運行截圖如下：

 第二種：.定位+margin（固定寬高）

html部分：

<div class="box2">
      <div class="inner"></div>
    </div>

css部分：

.box2{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        position: relative;
}

  .box2 .inner {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -50px;
        margin-left: -50px;
      }

運行截圖如下：

第三種：定位+margin:auto(不定寬高)

html部分：

 <div class="box3">
      <div class="inner"></div>
    </div>

css部分：

 .box3 {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        position: relative;
      }

.box3 .inner {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }

運行截圖如下：

第四種：transfrom(不定寬高)

html部分：

<div class="box4">
      <div class="inner"></div>
    </div>

css部分：

.box4 {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        position: relative;
      }

 .box4 .inner {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

運行截圖如下：

 第五種：flex佈局（不定寬高）

html部分：

<div class="box5">
      <div class="inner"></div>
    </div>

css部分：

 .box5 {
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        justify-content: center;
        align-items: center;
      }

 .box5 .inner {
        width: 100px;
        height: 100px;
        background-color: red;
      }

運行截圖如下：

第六種：grid佈局（不定寬高）

html部分：

  <div class="box6">
      <div class="inner"></div>
    </div>

css部分：

.box6 {
        display: grid;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }

.box6 .inner {
        width: 100px;
        height: 100px;
        background-color: red;
      }

運行截圖如下：

 第七種：table-cell佈局(不定寬高)

 <div class="box7">
      <div class="inner"></div>
    </div>

css部分：

 .box7 {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: table-cell;
        /* 使用這個佈局裡面的元素必須是inline-block元素 */
        text-align: center;
        vertical-align: middle;
      }
      .box7 .inner {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }

運行截圖如下：