行内元素 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的里的元素水平居中*/
使用margin absolute 居中
.spancenter {
position: absolute;
height: 200px;
width: 200px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
偶然发现一片写的很好的居中文章:
https://www.cnblogs.com/coco1s/p/4444383.html