[分享]css中常见的居中方式

CSS中的居中方式有很多种，常用的有水平居中和垂直居中。接下来我会介绍一些常用的居中方式和实现方法。1、水平居中水平居中最常用的情况是将一个块级元素居中在父元素中，下面是两种实现方式：（1）使用mar...

CSS中的居中方式有很多种，常用的有水平居中和垂直居中。接下来我会介绍一些常用的居中方式和实现方法。
1、水平居中
水平居中最常用的情况是将一个块级元素居中在父元素中，下面是两种实现方式：
（1）使用margin
p{
width: 200px;
margin: 0 auto;
}
上述代码中，设置了p元素的宽度为200px，然后将左右margin设置为auto，这样就能实现水平居中了。
（2）使用text-align
div{
text-align: center;
}
p{
display: inline-block;
}
上述代码中，将父元素的text-align设置为center，然后将子元素的display属性设置为inline-block，这样就能让父元素中的子元素水平居中显示。
2、垂直居中
当需要将一个块级元素垂直居中时，我们可以使用以下两种方法：
（1）使用flex布局
.container{
display: flex;
justify-content: center;
align-items: center;
}
p{
width: 200px;
height: 100px;
}
上述代码中，将父元素的display设置为flex，然后设置justify-content为center，align-items为center，这可以让子元素在父元素中垂直居中。
（2）使用绝对定位
.container{
position: relative;
height: 300px;
}
p{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
上述代码中，将父元素的position设置为relative，然后将子元素的position设置为absolute，top设置为50%，再使用transform将元素向上移动50%的高度，这样就能让子元素在父元素中垂直居中了。
总结：以上是CSS中常用的居中方式，希望对大家有所帮助。无论哪种方式，都可根据实际需求进行灵活选择。