行内&行内块&块级元素的水平和垂直居中方法总结
行内元素
<div class="box1">
<span>行内元素</span>
</div>
.box1{
width: 300px;
height: 300px;
border: 1px solid #000;
text-align: center; //设置水平居中(给父元素设置)
}
.box1 span {
line-height: 300px; //设置行高于父元素高度相同
}
块级元素
<div class="box2">
<div>块级元素</div>
</div>
.box2{
width: 300px;
height: 300px;
border: 1px solid #000;
text-align: center;
display: flex; //将父元素设置为弹性盒子
}
.box2 div {
margin: auto; //垂直水平居中(语法糖)
}
行内元素
<div class="box3">
<button>行内元素</button>
</div>
.box3{
width: 300px;
height: 300px;
border: 1px solid #000;
text-align: center; //设置水平居中(给父元素设置)
}
.box button {
line-height: 300px; //设置行高于父元素高度相同
}