行内元素 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的里的元素水平居中*/