总结-行内&行内块&块级元素的水平和垂直居中方法

行内&行内块&块级元素的水平和垂直居中方法总结

行内元素

<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; //设置行高于父元素高度相同
 }