摘要:写在前面居中方案是一个老生常谈的问题,主要包括水平居中和垂直居中,水平居中大家用的比较多,最常用的莫过于方案了,而垂直居中,很多时候会让很多新手头疼。常用居中方案水平解决方案水平居中适用于已经知道宽度,并且其父级宽度不为的元素水平居中。
写在前面
css居中方案是一个老生常谈的问题,主要包括水平居中和垂直居中,水平居中大家用的比较多,最常用的莫过于margin:0 auto方案了,而垂直居中,很多时候会让很多新手头疼。
常用居中方案(水平)margin:0 auto解决方案 (水平居中)
适用于已经知道宽度,并且其父级宽度不为0的元素水平居中。
.parent { width:800px; } .child { width:20%;//也可以是固定像素 margin:0 auto; }哈哈哈哈
2.利用text-align:center使行内元素水平居中(水平居中)
哈哈哈哈div { text-align:center }
3.flex水平居中
.parent { display:flex; justify-content:center }哈哈哈哈
4.绝对定位利用负边距居中(已知宽度)
.parent { position:relative; } .child { width:500px; position: absolute; }哈哈哈哈
5.绝对定位不知宽度居中,可以利用css transform属性,也可以利用flex居中
垂直居中方案.parent { position:relative; } .child { position: absolute; left:50%; transform:translate(-50%); }哈哈哈哈
1.不知宽高,兼容性很高的居中方案。
.parent { position:relative; } .child { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }哈哈哈哈
2.利用行高进行居中,行高和高度一致
.parent { height:50px; line-height:50px; }哈哈哈哈
3.flex方案
.parent { display: flex; justify-content: center; align-items: center; }哈哈哈哈
4.transform方案
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }哈哈哈哈
5.已知父级高度,利用margin-top进行居中,该方案过于简单,就不贴代码了
6.绝对定位,使用负边距居中
.parent { position: relative; } .child { position: absolute; width:500px; height:500px; top: 50%; left: 50%; margin-top:-250px; margin-left:-250px; }哈哈哈哈
还有一种是利用table方案居中,我觉得这种方案可能过时了,想了解的话可以自己百度一下
写在最后本文已经列出了大多情况下都可以解决的居中方案,还有一些比较居中,例如浮动元素居中可以参考绝对定位居中,如果不考虑兼容性的话,flex居中是最方便的方案,大家可以自由的去根据实际情况去选择需要的方案
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113939.html
摘要:基于特有的属性拥有内联元素的特性同时可以定义宽高,我们可以设置一个行内块用于定义高度,再让其他内联元素与其对齐,实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时,不仅在水平方向上将元素居中,垂直方向上也是如此。 事实上,每次面试前端必问的问题就是这个。及其常见的需求,看起来似乎非常简单,但是实现起来很费劲,尤其是涉及尺寸不固定的元素。 本篇文章将介绍比较流行的几种方法。 行内块...
摘要:基于特有的属性拥有内联元素的特性同时可以定义宽高,我们可以设置一个行内块用于定义高度,再让其他内联元素与其对齐,实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时,不仅在水平方向上将元素居中,垂直方向上也是如此。 事实上,每次面试前端必问的问题就是这个。及其常见的需求,看起来似乎非常简单,但是实现起来很费劲,尤其是涉及尺寸不固定的元素。 本篇文章将介绍比较流行的几种方法。 行内块...
摘要:在通常情况下,对那些需要居中的元素来说,其尺寸往往是由其内容来决定的。虽然没有垂直居中效果,但也是完全可以接受的。的另一个好处在于,它还可以将匿名容器即没有被标签包裹的文本节点垂直居中。 主要摘自:《CSS 揭秘》,强烈推荐的一本书。 44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中 实现垂直居中。——James Anderson(https://twitter.co...
阅读 1737·2021-11-24 09:39
阅读 1668·2021-11-22 15:22
阅读 984·2021-09-27 13:36
阅读 3097·2021-09-24 10:34
阅读 3308·2021-07-26 23:38
阅读 2618·2019-08-29 16:44
阅读 957·2019-08-29 16:39
阅读 1080·2019-08-29 16:20