方法1、定位

盒子宽高已知，

position: absolute;

left: 50%;

top: 50%;

margin-left:-自身一半宽度;

margin-top: -自身一半高度;

方法2、table-cell布局

父级 display: table-cell; vertical-align: middle;

子级 margin: 0 auto;

方法3、定位 + transform ;

适用于子盒子宽高不定时；（常用方法）

position: relative / absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

注意这里启动了3D硬件加速哦会增加耗电

方法4、flex 布局

父级：

display: flex;

align-items: center;/*垂直居中*/

justify-content: center;/*水平居中*/

感谢收看本期Q程序员说，最后别忘点赞加关注哈！有问题可留言讨论。

本文《html居中对齐怎么设置（html居中代码怎么写）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

站长导航
友情链接交换
关键词排名优化
GEO培训
SEO教程
站长导航
友情链接交换
关键词排名优化

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：用户投稿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/25997.html