[分享]CSS中居中显示有哪些用法

在进行网站的样式设计过程中，居中显示是我们经常会用到的功能，在CSS中有多种方法可以实现居中显示的效果。.center { margin: 0 auto; textalign: center; dis...

在进行网站的样式设计过程中，居中显示是我们经常会用到的功能，在CSS中有多种方法可以实现居中显示的效果。

.center {
   margin: 0 auto;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

其中，margin: 0 auto属性是用于使块级元素在父元素宽度内水平居中，而垂直方向不产生影响。

text-align: center属性用于将内联元素水平居中，同时也可以用于块级元素中进行多行文本的水平居中。

display: flex属性是将元素变成伸缩容器，通过对伸缩容器内元素的排列方式来实现居中。

justify-content: center属性是设置伸缩容器内元素在主轴上的对齐方式，我们通过将其设置为center来实现水平居中。

align-items: center属性是设置伸缩容器内元素在交叉轴上的对齐方式，我们通过将其设置为center来实现垂直居中。

position: absolute属性是将元素脱离文档流的属性，通过设置top和left属性为50%来让元素相对于父元素进行定位，最后通过translate属性来调整居中的位置。

总之，在CSS中实现居中显示的效果有很多方法，我们可以根据需要选择不同的方法来完成我们的设计需求。