div水平垂直居中方法（前端面試必備）

div水平垂直居中方法

方法1.這也是絕大多數網友使用的方法

<div class="fa">
    <div class="left1">

    </div>
</div>
//-----------樣式-----------------
        .fa{
            position:relative;
            width: 100%;
            height: 2rem;
            background-color:red;
        }
        .left1{
            position:absolute;
            width: 1.5rem;
            height: 1.5rem;
            top:50%;
            left:50%;
            margin-left:-0.75rem;
            margin-top:-0.75rem;
            background-color: #000000;
        }
（這種方法能夠實現水平垂直居中，但樣式代碼太多了）

方法1的升級寫法，使用calc();（個人比較推薦的寫法！）
.left1{
position:absolute;
width: 1.5rem;
height: 1.5rem;
top:calc(50% - 0.75rem);
left:calc(50% - 0.75rem);
background-color: #000000;
}
注意：1.calc（）的表達式中運算符兩邊必須要有空格。
說明：left:calc(50% - 0.75rem)中的0.75rem是指需要水平垂直居中的div的寬或高的一半；50%是指父級容器的50%，及一半，這裏的父級容器的寬度爲100%；
同理：top:calc(50% - 0.75rem)就不在說明。
方法2.

    <div class="fa2">
        <div class="left2">

        </div>
    </div>
    //-----------樣式-----------------
        .fa2{
            width: 100%;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: yellow;
        }
        .left2{
            width: 1.5rem;
            height: 1.5rem;
            background-color: green;
        }

第二種方法是直接在父盒子中寫樣式

---

爲了能及時的將自己踩到的前端坑分享給大家，以後會逐漸將文章轉移到微信公衆號：前端e家（front_e_family）。可直接掃碼關注，公衆號會不定期更新新文章，分享踩坑筆記！期待您的關注！