[分享]css内容垂直水平居中显示

CSS是前端最常用的样式表语言之一，它可以帮助我们实现各种各样的样式，其中包括内容垂直和水平居中。下面是一些可以用来实现内容居中的CSS代码：/ 水平居中 / .parent { display: f...

CSS是前端最常用的样式表语言之一，它可以帮助我们实现各种各样的样式，其中包括内容垂直和水平居中。

下面是一些可以用来实现内容居中的CSS代码：

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

上面这些代码块中的.parent都是用来指定容器的选择器，它们所代表的是需要垂直或水平居中的内容的父容器。

其中display: flex;是用来将这个容器变为一个弹性容器，这样可以通过调用flex属性以获得想要的效果。

接下来的justify-content和align-items属性分别用来控制内容的水平和垂直位置。其中的center值可以将内容居中。还可以使用其他的属性值，例如：start, end, flex-start, flex-end等等。

最后，如果您想要将内容同时居中，则需要两个属性都使用。例如：justify-content: center; align-items: center;。

总之，您可以用上面这些CSS代码轻松地实现内容的垂直和水平居中。请您在项目中自由使用这些代码并取得想要的效果。