子元素与父元素垂直居中

原创 魏小逗 教程 html+css 320阅读 2017-11-13 21:25:00 举报

在我们实际项目中,有很多关于垂直居中的方法,比如,在手机页面中有很多的弹框提示内容,简单整理如下,希望可以帮助到大家。
做了很多的页面,感觉垂直居中这个问题一直存在,感觉有的方法比较简单,有的却需要根据实际情况去算,我整理的是我在实际中使用过的方法,可能不是最全面的,但实操效果还是不错的哟。
首先呢,我们先分三种情况来看,第一种,就是给你的父元素定义 position: relative,然后给子元素一个position:absolute,这样靠我们的margin-left和margin-top的负值去计算单位。然后定位。实际例子如下:
html 代码

这种办法呢,不能说笨,毕竟有些值我们需要去算一下,精确度还是需要的,反正我每次这样做的时候总是需要,算啊算啊算,还有各种测量,虽然麻烦,但是问题不是很大

第二种办法呢,咱们就得用到关于css3的东西了
html 代码

这两个办法多多少少都会有点问题,而且你必须得知道你的父元素的大小,不然你这算起来,就尴尬了
有一次朋友出去面试,人家面试官就问到:对于父元素高度不确定,又要实现上下左右对齐,怎么做?朋友果断懵逼,新技术要更新啊,各位不然真的会挨拍
那么,我们就来介绍一下,我们怎么做,就可以只需要在父元素上使用布局,控制内容上下左右居中。
box布局,大家熟悉么?

html 代码

在很多情况下感觉第三种办法,更好一些,当然仁者见仁,大家可以根据实际情况进行选择需要哪儿种方法。
有错误的地方,欢迎指出哦~

评论 ( 6 )
最新评论
bestime 5F 2017-11-15 14:31:48 6F

这种方法我也研究过。为什么没说了。因为有问题。这个并不适用于未知宽高。你看他这段代码。指明了width:20%;height:20%;这样当然是没问题的。可是当你删除width和height。你会发现自身会被拉扯得和父级尺寸一样。所以我说我一直用的第一种方法。虽然有时候没有指定width和height时需要用js去计算。但这个方法比较靠谱。

魏小逗 2F 2017-11-15 11:06:02 5F

试了一下,果断放弃第一种原来的方法,使用你提供的方法,感谢

魏小逗 2F 2017-11-15 11:03:20 4F

哈哈哈,看来还是我的方法比较笨,你这个好,收藏啦

魏小逗 1F 2017-11-15 11:02:57 3F

是,第二种方法用在有文字的时候,效果真是惊奇的难受。。第三种,新技术嘛,可用度,有待追加感受效果

心理学徒幽灵聪 2017-11-14 16:04:36 2F

未知宽高的元素垂直水平居中还可以采用定位,设置四个方向的值为0,通过margin:auto来进行居中

html 代码

bestime 2017-11-14 08:40:52 1F

你成功地抛弃了麻烦但兼容性好的方法确选择了便捷但兼容不好的方法。我平时都用第一种,和你的用法有出入。第二种排除兼容性,文字会变得模糊。第三种,不敢用。