1.text-align:center;
使用以上方式居中是将父级容器中display:inline;的行内元素或者文字进行水平居中。
2.inline-height:(height)值;
使用inline-height时经常和height一起使用，使得内容垂直方向上居中，建议在列表内部的li中使用；
3.margin:auto;
立即学习“前端免费学习笔记（深入）”；
使用margin来居中时，一般是在元素给出了确切的width值，设置margin:auto; 或者 margin: 0 auto; 是一样的效果：当前的元素将水平居中；
使用margin时，也可以设置 margin-left和margin-right的值相等，也能实现水平居中；
4.position定位居中
根据top和left或者bottom、right进行设置，可使元素水平、垂直居中；但是父级元素必须设置高度；
5.Flex盒子
Flex容器的flex-align:center;
align-items:center;
justify-cotent:center;
项目属性的align-self:center;
6.负值margin：
1 .box { 2 width: 600px; 3 height: 400px; 4 position: relative; 5 }
6 7 .box1 { 8 width: 300px; 9 height: 200px;10 padding: 20px;11 position: absolute;12 top: 50%;13 left: 50%;14 margin-left: -170px;/*(width+padding)/2 */15 margin-top: -120px;/*(height+padding)/2 */16 }以上代码可实现元素的水平垂直居中。
以上就是CSS居中方式有哪些？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
581
收藏
