当前位置:Gxlcms > html代码 > 一问就蒙(1)垂直居中_html/css_WEB-ITnose

一问就蒙(1)垂直居中_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:27人阅读

最近老是面试,面别人和被人面,有很多常常考察的知识点,准备总结一下,写一个一问就蒙系列。

如何将一个子div 垂直居中,这是一个常被问到的题目。直接进入正题,其实有这么几种方案:

1、padding/margin

这是最土的方案,比如外部div包裹高度为固定的30px,内部div高度为固定的10px,那么居中方案很简单,只要给内部的div设置一个padding/margin就可以了。

代码如下:

    .inner-div {        padding(margin): (( 外层高度 - 内层高度 ) / 2) 0;    }

2、绝对定位

使用绝对定位来进行垂直居中的设置,可能是最常用的了,基本原理是:将子元素相对于父元素移动50%,但由于绝对定位的坐标原点为左上角,所以要再将子元素向回修正该元素宽度的一半,这样则元素刚好居中:

代码如下(假设子元素宽度为200px):

    .inner-div {        position: absolate;        top: 50%;        margin-top: -100px;    }

以上方法是传统方法,如果继续深究,当不知道子元素高度的情况怎么办呢?毕竟有很多时候,我们是没法直接知道元素的宽度的。

所以有了以下这种进阶方案,这个需要用到css3的一些属性,具体浏览器兼容请戳 这里;

具体方法如下:

    .inner-div {        position: absolate;        top: 50%;        /*利用css3的属性,进行移动,就不需要知道元素具体高度了*/        transform: translateY(-50%);    }

3、终极解决方案

使用css3中提供的flexible box来解决问题,具体兼容性请戳 这里; 由于兼容性问题,代码需要增加前缀:

    display: -webkit-box;    -webkit-box-pack: center;    -webkit-box-align: center;    display: -moz-box;    -moz-box-pack: center;    -moz-box-align: center;         display: -ms-flexbox;    -ms-flex-pack: center;    -ms-flex-align: center;

一般来说,如上代码增加到子元素上即时生效,如果出现问题,放到外层试试 :P

综上,这就是我了解到的几种常用的垂直居中的方式,如果有一些别的方式,希望不吝赐教,谢谢!

人气教程排行