摘要:基于绝对定位不确定子元素宽高子元素确定固定宽高宽高不固定基于的解决方案或者直接设置不需要再给子元素设置样式
基于绝对定位 absolute /不确定子元素宽高
1:子元素确定固定宽高
.parent{ position:relative; } .child{ position:absolute; top:50%; width:18em; height:6em; margin-top:-3em; margin-left:-9em; }
2:宽高不固定
.parent{ position:relative; } .child{ position:absolute; top:50%; height:50%; transform:translate(-50%,-50%); }
基于Flexbox的解决方案
.parent{ display:flex; } .child{ margin:auto; }
或者直接设置align-items,不需要再给子元素设置样式
.parent{ display:flex; align-items:center; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115626.html
摘要:包括水平居中,垂直居中,还有水平垂直居中。如果要再要细分,还要分浮动元素绝对定位的居中。样式水平居中的元素图片的水平居中图片的居中,比较特殊。 2018.05.29 居中一个元素?你会想到啥?这里面的知识还真不少。包括水平居中,垂直居中,还有水平垂直居中。如果要再要细分,还要分浮动元素、绝对定位的居中。为了代码简介,没有加背景和其他样式,需要看效果的,可以加上背景。 目录: 第一...
摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...
摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...
摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...
摘要:但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...
阅读 1808·2019-08-30 13:54
阅读 2723·2019-08-29 17:27
阅读 1108·2019-08-29 17:23
阅读 3350·2019-08-29 15:20
阅读 1224·2019-08-29 11:28
阅读 1565·2019-08-26 10:39
阅读 1314·2019-08-26 10:29
阅读 638·2019-08-26 10:13