1行內塊元素水平居中垂直居中
行內元素和行內塊元素水平居中,給其父元素添加text-align:center;所以案例里面給one加了 text-align: center之后span就會水平居中了。在設置span行高和高都是一樣的 20px;這樣就實現上下居中了。
2塊級元素P元素水平居中垂直居中
給其父元素添加text-align:center使其水平居中,這個只是對行內元素和行內塊元素有效。而P元素是塊級元素,所以不能使用上面的方法。可以用定位來做。p設置 position: absolute;再給他父元素two加 ?position: relative;然后開始計算上面距離的數值和左邊距離的數值,這里分別是
?top: 15px;left: 50px;然后就實現上下水平居中了。
3.塊級元素h3元素水平居中垂直居中
使用 display: flex;使父級元素變成彈性盒子,然后再通過 ?margin: auto;來設置水平垂直居中。
它之所以被稱為 Flexbox(彈性盒子) ,是因為它能夠擴展和收縮 flex 容器內的元素,以最大限度地填充可用空間。
關于 Flexbox(彈性盒子)可以看看這里的詳細講解
https://www.cnblogs.com/hellocd/p/10443237.html
4.塊級元素P元素水平居中垂直居中
?當給p元素設置margin: 15px auto;的時候,會發現p元素的外邊距和它的父元素外邊距重合,看著是外邊距塌陷問題。給父元素添加overflow: hidden;之后,就正常了。
給父元素或者子元素設置text-align:center,display:flex,子元素設置:position:absolute
實例:
父元素:
.cancel-div {
height: 28%;
text-align: center;
justify-content: center;
display: flex;
align-items: center;
border-top: solid 1px #F7F7F7;
color: #333;
}
子元素:
.cancel-div p {
bottom: 0.2rem;
position: absolute;
font-size: 0.45rem;
}