CSS：一個元素在一個容器中居中的方式

水平居中

方法一：使用樣式text-align: center;

方法二：使用樣式margin: 0 auto;

方法三：使用display: flex佈局；

方法四：使用絕對定位的方式

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

.parent{
    position: relative;
    .child{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

垂直居中：

方法一：使用樣式vertical-align: middle(須要是行內元素，每每伴隨着display: inline-block; 同時每每須要對於存在多個子元素時生效，因此當只存在一個元素而又須要用這種方式實現效果時，每每須要使用僞元素:before :after)；

方法二：使用display:flex佈局；

方法三：使用絕對定位的方式

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

.parent{
    position: relative;
    .child{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
}

水平垂直居中，除了以上幾種方式的結合以外，還能夠經過如下幾種方法實現：

方法一：使用display：table；display:table-cell;

方法二：使用display:flex佈局

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

平常筆記