位置: IT常识 - 正文
前端技术中的几种居中方式(前端的基本知识)
编辑：rootadmin推荐整理分享前端技术中的几种居中方式(前端的基本知识)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端主要,前端的基本知识,前端技术术语,前端技术中包含哪三种技术,前端技术的三大基础,前端涉及的技术,前端涉及的技术,前端涉及的技术,内容如对您有帮助，希望把文章链接给更多的朋友！
1、使用margin:0px auto可以使盒子水平居中，但要设置宽度。
2、在父元素中使用text-align:center可以将子元素设置水平居中，但子元素必须为行内元素或行内块元素。
3、使用绝对定位，父相子绝的原则，在子元素中设置left:50%和transform:translateX(-50%)。可以不设置宽高。
这里的left:50%是将子元素的左边缘线紧贴在父元素的中线，transform:translateX(-50%)是将子元素向左移动其自身宽度的一半。
二、垂直居中
1、使用绝对定位，父相子绝的原则，在子元素中设置top:50%和transform:translateY(-50%)。可以不设置宽高。
这里的top:50%是将子元素的上边缘线紧贴在父元素的中线，transform:translateY(-50%)是将子元素向上移动其自身高度的一半。
2、将父元素设置为display:table-cell，并设置vertical-align: middle，要设置宽高。子元素要是行内元素或行内块元素。
3、要想使文字垂直居中，最简单的方式是将行高line-height的值设置为元素的高度一样的值。
三、水平垂直居中1、使用绝对定位，父相子绝的原则，在子元素中设置left:50%;top:50%和transform:translateX(-50%) translateY(-50%)。可以不设置宽高。(推荐使用)
2、使用flex布局时，在父元素中设置display:flex; align-items: center; justify-content: center;可以使子元素水平垂直居中。
align-items用于控制弹性盒的纵轴（即垂直方向）上的对齐方式，justify-content用于控制横轴（即水平方向）上的对齐方式。
3、将父元素设置为display:table-cell，并设置vertical-align: middle; text-align:center; 要设置宽高。子元素要是行内元素或行内块元素。
上一篇：k8s 部署nginx 实现集群统一配置，自动更新nginx.conf配置文件 总结(k8s部署ingress-nginx)