web前端css如何居中(web前端面试题2html元素垂直水平居中都有哪些方法)
这个问题好像面试必问的!以前我问时不时会问一下,基础的给分题。
方法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程序员说,最后别忘点赞加关注哈!有问题可留言讨论。
,
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com