行內元素 display:inline-block 給定寬高後居中
text-align: center; /* 文字 行內元素 行內塊元素水平居中 */
塊級元素居中
margin: 10px auto; /* 塊級盒子水平居中 左右margin 改爲 auto */
圖片和文字居中
img {
vertical-align: middle;/* 設置圖片和文字對齊的基線 */
}
vertical-align 是對齊居中的意思,同一父元素下,一個元素相對另一個居中
.box1::after {
content: "";
display: inline-block;
height: 100%;
width: 0px;
vertical-align: middle;
}
/*增加上這個僞元素,即可讓box2基於box1居中,box1又是100%高,因此再父容器中居中 *\
.box2 {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 50px;
}
文字居中 高和行高相同
height: 42px;
line-height: 42px;/* 水平方向居中 */
text-align: center;/* 豎直方向居中 */
flex水平 垂直居中
display: flex;
align-items: center; /*定義body的元素垂直居中*/
justify-content: center; /*定義body的裏的元素水平居中*/