常用的居中方式

常见的居中方式

水平居中

• 行内元素

例如常见的文本、图片、按钮等元素，可以给父元素设置
.box{text-align: center;}

• 块级元素

固定宽度元素
01-通过设置元素的左右margin为auto来实现水平居中
.box{ margin: 0 auto; }

02-flex方法

.parent {
    display:flex;
    justify-content:center;//水平居中
    align-items:center;//垂直居中
}

03-定位方法
通过给父元素设置 position:relative ，子元素设置 position:absolute 和 left: -50% 来实现水平居中。

.parent{
     position:relative;
}
.child{
    position:absolute;
    left:50%; 
    top:50%;
    transform:translate(-50%,-50%);
}

垂直居中

01-通过设置父元素的 height 和 line-height 高度相等来实现的。

.wrap h2{
     height:100px;
     line-height:100px;
}

02-flex布局

.parent {
   display:flex;
   justify-content:center;//水平居中
   align-items:center;//垂直居中
}

03-grid布局

.parent {
  display:grid;
  justify-items: center ;
  align-items: center;

}