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


本文摘自PHP中文网,作者青灯夜游,侵删。

下面本篇文章给大家介绍一下子盒子在父盒子内保持垂直水平居中的多种方案--已知子元素高度、未知子元素高度。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

(推荐教程:CSS视频教程)

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

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.png

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

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

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

2.png

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

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

更多编程相关知识,请访问:编程视频!!

以上就是已知和未知高度下进行垂直水平居中的方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

jq如何改变css样式

css怎么设置在底部

老司机来和你谈谈,为什么说css是最难的!!

使用html和css实现康奈尔笔记的模板

css如何隐藏溢出来的文字

css间距怎么设置

dw如何新建css规则

myeclipse css 不起作用怎么办

如何改变css伪元素的样式

css中有哪些常见的布局方式

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...