怎样使一个元素绝对居中(元素水平垂直居中的方式有哪些)
元素水平垂直居中的方式有哪些?
- absolute加margin方案
- fixed 加 margin 方案
- display:table 方案
- 行内元素line-height方案
- flex 弹性布局方案
- transform 未知元素宽高解决方案
absolute加margin方案
div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%: margin-top: -50px; margin-left: -50px; }
fixed 加 margin 方案
div{ position: fixed; width: 100px; height: 100px; top: 0; right:0; left: 0; bottom: 0; margin: auto; }
display:table 方案
div{ display: table-cell; vertical-align: middle; text-align: center; width: 100px; height: 100px; }
行内元素line-height方案
div{ text-align: center; line-height: 100px; }
flex 弹性布局方案
div{ display: flex; align-items: center; justify-content:center }
transform 未知元素宽高解决方案
div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com