您现在的位置:主页 > 发展 >

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

标签: 日期:2020-12-16 16:23来源:未知作者:admin
下面本篇文章给大家介绍一下子盒子在父盒子内保持垂直水平居中的多种方案--已知子元素高度、未知子元素高度。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮

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

  (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.子元素开启绝对定位,父元素开启相对定位(这一步和方案一相同)

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

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

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

  编程视频!!

顶一下
(0)
0%
踩一下
(0)
0%
相关文章
共有人强势围观,期待你的评论!评论区
小提示: 本站的评论不需要审核,即发即显,有什么话你就尽管说吧,但不要过激哦,以免遭跨省处理!

验证码:点击我更换图片 匿名评论
最新评论