CSS寬度百分比水平居中方法

在CSS中，我們可以使用百分比來設(shè)置元素的寬度，并且可以通過一些技巧來實(shí)現(xiàn)水平居中，下面是一些實(shí)現(xiàn)方法：

1、使用margin:auto實(shí)現(xiàn)水平居中

我們可以將元素的左右margin設(shè)置為auto，這樣瀏覽器就會(huì)自動(dòng)計(jì)算左右兩側(cè)的空間，使元素水平居中。

div {
  width: 50%;
  margin: auto;
}

2、使用transform:translate實(shí)現(xiàn)水平居中

我們可以使用transform屬性中的translate函數(shù)來實(shí)現(xiàn)元素的水平移動(dòng)。

div {
  width: 50%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

3、使用flexbox實(shí)現(xiàn)水平居中

我們可以使用flexbox布局來實(shí)現(xiàn)元素的水平居中。

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

是一些實(shí)現(xiàn)CSS寬度百分比水平居中的方法，可以根據(jù)具體的需求選擇適合的方法。