水平居中很簡單塊級元素:margin:0 auto;內聯元素(行內元素): text-align:center,但是垂直居中的辦法相對來說麻煩點而且有很多不同的實現方法,今天做一個垂直居中的方法整理。
結構:
<div class="box">
<div class="redbox"></div>
</div>
第一種:
.redbox{background-color: red;width: 50px;height:50px;display: inline-block;vertical-align: middle;margin: 0 auto;}
.box{border: saddlebrown 1px solid;width: 500px;height: 300px;margin: 0 auto;text-align: center;}
.box:before{content: "";display: inline-block;width: 0px;height: 100%;position: relative;vertical-align:middle;background-color: #8B4513;}
這辦法是需要改div的display,再用父元素創建一個僞div 高度設置爲100%,再利用vertical-align 屬性,該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。
值 | 描述 |
---|---|
top | 把元素的頂端與行中最高元素的頂端對齊 |
bottom | 把元素的頂端與行中最低的元素的頂端對齊。 |
middle | 把此元素放置在父元素的中部。 |
個人習慣寫css不喜歡展開,因爲覺得太佔行了,如果不太明白試着改一下僞類的高度就明白了。以最高的行內元素爲準:
第二種:
.box{border: saddlebrown 1px solid;width: 500px;height: 300px;margin: 0 auto;}
.redbox{background-color: red;width: 50px;height:50px;margin: 0 auto;position: relative;top: calc(50% - 25px);}
calc()函數用於動態計算長度值
水平居中後,用calc算top值,就是50%-自身的一半,這種方式有很多種實現的辦法,例如:
.redbox{background-color: red;width: 50px;height:50px;margin: 0 auto;position:relative;top: 50%;margin-top: -25px;}
不用動態計算,自己再寫一個margin-top頂上去就好
.redbox{background-color: red;width: 50px;height:50px;margin: 0 auto;position:relative;top: 50%;transform: translateY(-50%);}
這裏要注意translateY(-50%)是自身的50%,也就是-25px
第三種:
.box{border: saddlebrown 1px solid;display: table-cell;width: 500px;height: 300px;margin: 0 auto;vertical-align: middle;}
.redbox{background-color: red;width: 50px;height:50px;margin: 0 auto;}
改變父元素display以表單單元格形式顯示,再加個vertical-align: middle,最後也需要子元素水平居中。
第四種:
.box{border: saddlebrown 1px solid;display: flex;align-items: center;width: 500px;height: 300px;margin: 0 auto;}
.redbox{background-color: red;width: 50px;height:50px;margin: 0 auto;}
彈性盒子佈局,居中顯示
不依靠父元素垂直居中,例如:
比較適合做懸浮窗什麼的,如果是提示框就換成文檔定位
第一種:
.box{width: 100px;height:100px;background-color: aqua;position: absolute;left: 0px;right: 0px;bottom:0px;top: 0px;margin:auto;}
第二種
.box{width: 100px;height:100px;background-color: aqua;position: absolute;top:calc(50% - 50px);left:calc(50% - 50px);}
也是根據這個有很多種算top和left的值,例:
.box{width: 100px;height:100px;background-color: aqua;position: absolute;top:50%;left:50%;transform: translateX(-50%) translateY(-50%);}
.box{width: 100px;height:100px;background-color: aqua;position: absolute;top:50%;left:50%;margin-left: -50px;margin-top: -50px;}
上面所說的只要沒有改父元素的display屬性都可以不依靠父元素達到垂直居中的目的。
以上理解若有錯幫忙指出,感謝!