常見(jiàn)的居中方式

水平居中

• 行內(nèi)元素

例如常見(jiàn)的文本、圖片、按鈕等元素，可以給父元素設(shè)置
.box{text-align: center;}

• 塊級(jí)元素

固定寬度元素
01-通過(guò)設(shè)置元素的左右margin為auto來(lái)實(shí)現(xiàn)水平居中
.box{ margin: 0 auto; }

02-flex方法

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

03-定位方法
通過(guò)給父元素設(shè)置 position:relative ，子元素設(shè)置 position:absolute 和 left: -50% 來(lái)實(shí)現(xiàn)水平居中。

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

垂直居中

01-通過(guò)設(shè)置父元素的 height 和 line-height 高度相等來(lái)實(shí)現(xiàn)的。

.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;

}