居中方式總結
經典真題
- 怎么讓一個 div 水平垂直居中
盒子居中
首先題目問到了如何進行居中，那么居中肯定分 2 個方向，一個是水平方向，一個是垂直方向。
水平方向居中
水平方向居中很簡單，有 2 種常見的方式：
-
設置盒子 margin : 0 auto：這種居中方式的原理在于設置 margin-left 為 auto 時，margin-left 就會被設置為能有多大就設置多大，所以盒子會跑到最右邊，而設置 margin-right 為 auto 時，同理盒子就會跑到最左邊。所以，當我們設置左右的 margin 都是 auto 的時候，盒子就跑到了中間，從而形成了水平居中。
-
第二種常見的方式就是通過 display : flex 設置盒子的外層盒子是一個彈性盒，然后通過 justify-content : center 使得內部的盒子居中。
垂直方向居中
關于盒子的垂直方向居中，方法就比較多了，這里介紹幾種：
- 通過 verticle-align:middle 實現垂直居中
通過 vertical-align:middle 實現垂直居中是最常使用的方法，但是有一點需要格外注意，vertical 生效的前提是元素的 display：inline-block。并且在使用 vertical-align:middle 的時候需要一個兄弟元素做參照物，讓它垂直于兄弟元素的中心點。vertical-align 對齊的方法是尋找兄弟元素中最高的元素作為參考。
代碼示例如下：
<div class="container"><div class="item"></div><div class="brotherBox"></div>
</div>
.container{width: 500px;height: 300px;background-color: pink;text-align: center;
}
.item{width: 100px;height: 100px;background-color: skyblue;vertical-align: middle;margin: 0 auto;display: inline-block;
}
.brotherBox{height: 100%;/* width: 2px; */background: red;display: inline-block;vertical-align: middle;
}
- 通過偽元素 :before 實現垂直居中
平白無故添加一個無意義的參考元素不怎么好，我們可以去除作為參考的兄弟元素，轉為給父元素添加一個偽元素，如下：
<div class="container"><div class="item"></div>
</div>
.container{width: 500px;height: 300px;background-color: pink;text-align: center;
}
.container::before{content : '';display: inline-block;vertical-align: middle;height: 100%;
}
.item{width: 100px;height: 100px;background-color: skyblue;vertical-align: middle;margin: 0 auto;display: inline-block;
}
- 通過絕對定位實現垂直居中
這種方式需要設置父元素為相對定位，子元素為絕對定位，然后配合 margin-left 為負的盒子高度一半來實現垂直居中
<div class="container"><div class="item"></div>
</div>
.container{width: 500px;height: 300px;background-color: pink;position: relative;
}
.item{width: 100px;height: 100px;background-color: skyblue;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;
}
- 通過 transform 實現垂直居中
可以通過定位配合 transform 也可以實現垂直居中
<div class="container"><div class="item"></div>
</div>
.container{width: 500px;height: 300px;background-color: pink;position: relative;
}
.item{width: 100px;height: 100px;background-color: skyblue;position: absolute;left: 50%;top: 50%;transform: translateX(-50px) translateY(-50px);
}
- 使用彈性盒子居中
通過設置父元素為彈性盒子，然后使用 justify-content: center 和 align-items: center 來設置內部盒子水平垂直居中
<div class="container"><div class="item"></div>
</div>
.container{width: 500px;height: 300px;background-color: pink;display: flex;justify-content: center;align-items: center;
}
.item{width: 100px;height: 100px;background-color: skyblue;
}
以上就是比較常見的盒子居中的解決方案，當然目前來講最推薦的就是使用彈性盒子，這是目前最常用的一種方式，也是最推薦的一種方式。
真題解答
- 怎么讓一個 div 水平垂直居中
參考答案：
- 通過 verticle-align:middle 實現垂直居中
- 通過父元素設置偽元素 :before ，然后設置子元素 verticle-align:middle 實現垂直居中
- 通過絕對定位實現垂直居中
- 通過 transform 實現垂直居中
- 使用彈性盒子居中
-EOF-
