[分享]css3控制居中显示

CSS3中有很多方法可以帮助控制居中显示，接下来我们来介绍几种常用的方法。

1、水平居中

代码：
.parent {
  text-align: center;
}
.child {
  display: inline-block;
} 

这种方法是将父元素的text-align属性设置为center，再将子元素的display属性设置为inline-block，即可实现水平居中显示。不过需要注意的是，该方法仅适用于单行元素。

2、水平垂直居中

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

这种方法适用于居中显示任意大小的元素。首先将父元素的position属性设置为relative，再将子元素的position属性设置为absolute，top和left属性设置为50%。最后使用translate属性将元素向上、向左移动自身大小的一半，即可实现水平垂直居中。

3、垂直居中

代码：
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  height: 100px;
} 

这种方法是使用CSS3的flex布局，将父元素的display属性设置为flex，再将justify-content属性和align-items属性均设置为center。这样就可以实现垂直居中。需要注意的是，如果子元素高度未被设置，则会出现内容上下不居中的情况。

以上就是CSS3控制居中显示的几种常用方法，可以根据具体需求选择合适的方法来实现元素的居中显示。