使一个div垂直+水平居中的几种方法

前几天去一家互联网公司面试,面试官问到了这个应该算是比较简单的问题,在我自认为回答正确时,才知道这道题的答案有很多种,下面就让我们一起来探讨一下这个问题:

思路1:绝对定位居中(原始版)

这个是我回答出来的,也是被各位所熟知的一种方法,设外层div相对定位,内层div绝对定位,top、left分别设为50%,然后通过设置margin-top、margin-left值为宽度的负数就可以成功实现垂直水平居中了:

    Document*{margin: 0;padding:0;}.outer{width: 80%;height: 400px;background: # ccc;margin: 0 auto;position: relative;}.inner{width: 400px;height: 300px;background: green;position: absolute;top: 50%;left: 50%;margin-top: -150px;/*设为高度的1/2*/margin-left: -200px;/*设为宽度的1/2*/}

很常见的,这个经典的方法最大的不足之处是inner的宽度必须是固定值,否则margin-top和margin-left的值将无法设置,为了解决这个问题,我们考虑将使inner发生位移的代码由margin-top、margin-left换成其他形式,换成什么呢?请看第二种方法:

思路2:绝对定位居中(改进版之一)

我们的目的是让inner在top和left方向发生50%偏移之后,再往回偏移一定距离,而css里关于位置偏移的属性还有什么呢?当我们查阅最新版的css3属性之后,发现这样一个属性:selector{transform:translate();},translate代表着水平、垂直方向上的转换(位移),其中当括号内的值设为百分比时,将以元素自身宽度为基准,移位相应的宽度,这样一来,我们的问题就得到了解决:

*{margin: 0;padding:0;}.outer{width: 80%;height: 400px;background: # ccc;margin: 0 auto;position: relative;}.inner{width: 70%;height: 300px;background: green;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);/*在水平和垂直方向上各偏移-50%*/}

这个方法妥善解决了内层div宽度不确定的问题,但由于使用了css3的新属性,在低版本ie浏览器下是不兼容的。由此,我们想到了第三种方法:

思路3:绝对定位居中(改进版之二)

*{margin: 0;padding:0;}.outer{width: 80%;height: 400px;background: # ccc;margin: 0 auto;position: relative;}.inner{width:70%;height: 300px;background: green;position: absolute;top: 0;left:0;right:0;bottom:0;/*让四个定位属性都为0*/margin:auto;/*很关键的一步*/}

这个方法,不仅能在inner宽度不确定时发挥作用,还能兼容各种主流浏览器,看上去似乎很完美,但事实上,当我们的需求改为:宽度随内部文字自适应 ,即宽度未设置时,这种方法就无法满足需求了,原因是left、right设为0后,inner在宽度未设置时将占满父元素的宽度。

(你可以在思路二的基础上将inner宽度去掉,内部放一些文字,你会发现在第二种思路下这种需求是可以满足的)

思路4:flex布局居中

flex布局是移动端一种很新潮的布局方法,利用flex布局使元素垂直水平居中,缺点依然是令人头疼的兼容性问题(在ie11-中不起作用),优点是代码量比前几种方法相比略少,方便使用。
让我们一起来了解一下:

    Document*{margin: 0;padding:0;}.outer{width: 80%;height: 400px;background: # ccc;margin:0 auto;display: flex;/*设置外层盒子display为flex*/justify-content:center;/*设置内层盒子的水平居中*/align-items:center;/*设置内层盒子的垂直居中*/}.inner{display: inline-block;height: 300px;background: yellow;}        这是一段文字这是一段文字这是一段文字

以上就是使div垂直+水平居中的四种方式,关于第三种思路中inner无法对内容自适应的问题,目前我还没有想出解决办法,希望高人们能够指点一二。

参考文章:小tip: margin:auto实现绝对定位元素的水平垂直居中--来自张鑫旭-鑫空间-鑫生活

关键字:css, flex, 居中, 宽度

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部