[分享]css中实现内容居中显示

CSS中的布局很重要，而实现内容居中显示也是其中的一项技巧。

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

以上代码可以实现容器内所有元素的水平和垂直居中。其中，display: flex;可以将容器设置为弹性布局，justify-content: center;可以使元素水平居中，align-items: center;可以使元素垂直居中。

如果只想实现元素的水平居中或垂直居中，可以使用以下代码：

.horizontal-center {
   display: flex;
   justify-content: center;
}

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

以上代码分别实现元素的水平居中和垂直居中。其中，.horizontal-center使用了justify-content属性，而.vertical-center使用了align-items属性。

除了以上几种方式，还可以使用text-align和line-height属性实现文本的水平居中和垂直居中。

.text-center {
   text-align: center;
}

.line-height-center {
   line-height: 容器高度;
   text-align: center;
} 

其中，line-height-center可以根据容器的高度来设定行高，从而实现元素的垂直居中。

总之，在CSS中实现内容居中显示需要多种技巧的运用，开发者需要根据实际需求来选用最合适的方式。