本文目錄導(dǎo)讀：

1. CSS居中設(shè)置
2. CSS居右設(shè)置

CSS中的居中設(shè)置可以通過多種方式實現(xiàn)，而居右設(shè)置則相對簡單，下面將分別介紹這兩種設(shè)置方法。

CSS居中設(shè)置

1、使用flex布局實現(xiàn)居中

Flex布局是一種非常強(qiáng)大的布局方式，可以輕松地實現(xiàn)元素的居中顯示，通過給父元素設(shè)置display: flex;屬性，可以讓子元素在父元素中水平垂直居中。

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

2、使用position和transform實現(xiàn)居中

通過給元素設(shè)置position: absolute;屬性，可以讓元素脫離文檔流，并使用transform屬性將元素移動到父元素的中心位置。

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

CSS居右設(shè)置

居右設(shè)置相對簡單，可以通過給元素設(shè)置float: right;屬性來實現(xiàn)。

.container {
  float: right;
}

需要注意的是，居右設(shè)置可能會影響其他元素的布局，因此在使用時需要謹(jǐn)慎，如果需要讓居右的元素與其他元素保持一定的距離，可以使用margin-left屬性來設(shè)置。

.container {
  float: right;
  margin-left: 10px;
}

CSS中的居中設(shè)置和居右設(shè)置都有多種實現(xiàn)方式，可以根據(jù)具體的需求選擇適合的方法，在使用這些屬性時，需要注意它們的兼容性和對其他元素的影響。