[分享]css3各种居中的八法

CSS3的各种居中方式让我们在布局时更加灵活和方便，下面分享八种常用居中方法：1. 水平居中.container{ textalign: center; } 这种方法需要在父元素上设置textalig...

CSS3的各种居中方式让我们在布局时更加灵活和方便，下面分享八种常用居中方法：

1. 水平居中

.container{
  text-align: center;
} 

这种方法需要在父元素上设置text-align:center，使子元素水平居中。

2. 垂直居中

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

使用flex布局，设置父元素display:flex，子元素使用align-items:center可以实现垂直居中。

3. 水平垂直居中

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

使用flex布局，设置父元素display:flex，子元素使用justify-content:center和align-items:center可以实现水平垂直居中。

4. 绝对定位水平垂直居中

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

使用position:absolute和transform属性可以实现绝对定位水平垂直居中。

5. 表格布局水平垂直居中

.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
} 

使用display:table-cell和text-align:center,vertical-align:middle可以实现表格布局水平垂直居中。

6. Grid布局水平垂直居中

.container {
  display: grid;
  place-items: center;
} 

使用Grid布局，设置父元素display:grid,子元素使用place-items:center可以实现水平垂直居中。

7. transform水平垂直居中

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

使用transform属性可以实现水平垂直居中

8. 弹性盒子水平垂直居中

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

使用弹性盒子布局，设置父元素display:flex，子元素使用justify-content:center和align-items:center可以实现水平垂直居中。