在网页设计中，居中是常常需要使用到的
一个布局方式。而在CSS中，通过设置不同的
属性和
属性值，可以轻松地将元素居中。下面将介绍一些常见的居中
代码写法。
针对块级元素居中的写法：
1）通过设置margin
属性实现水平居中，如下所示：
p{
margin: 0 auto;
}
2）使用flex布局来进行居中，如下所示：
p{
display: flex;
justify-content: center;
align-items: center;
}
针对行内元素居中的写法：
1）使用text-align
属性来实现
文字的水平居中，如下所示：
p{
text-align: center;
}
2）使用行内块元素，再设置text-align
属性来实现水平居中，如下所示：
p {
display: inline-block;
text-align: center;
}
此外，如果想要实现垂直居中，有以下几种写法：
1）使用flex布局实现垂直居中，如下所示：
.p-wrap {
display: flex;
align-items: center;
justify-content: center;
}
2）通过设置position和transform
属性来实现垂直居中，如下所示：
.p-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
综上所述，CSS中居中
代码写法多种多样，根据不同的场景和需求选择合适的居中方式，能够极大地提高网页的美观性和可读性。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
