一、方案一(已知子元素的宽高)

1.子元素开启绝对定位,父元素开启相对定位

2.子元素设置left、right、top、bottom属性都为0,margin为auto

或者 (注意2、3步二选一)

3.子元素left设为50%,top设为50%,margin-left设为 -子元素的width/2px,margin-top设为 -子元素的height/2px

已知和未知高度下进行垂直水平居中的方法

二、方案二(未知子元素宽高)

1.子元素开启绝对定位,父元素开启相对定位(这一步和方案一相同)

2.子元素left设为50%,top设为50%,transform设为translate(-50%,-50%)

已知和未知高度下进行垂直水平居中的方法

特别说明:子元素开启了绝对定位,随之父元素也要开启非static定位(relative相对定位或者是absolute绝对定位都可以,根据需求),才能使子元素的绝对定位是相对于其父元素进行定位。

end,每种方案实现原理都不尽相同,望辩证待之。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。