总结
在我们设计网页的过程中,经常需要一些dom元素在其父元素或者相对于网页是水平垂直居中的,例如:登录页面让登录窗口居中显示,以下是我总结的几种常用方法。
本题考察:css的灵活运用
第一种方法:使用绝对定位实现
css如上图所示,先将inner的父元素相对定位(position:relative;),再将inner水平居中(margin: auto;),然后对inner进行在父元素wraper中绝对定位(position: absolute;),并将其top、right、bottom、left属性设置成0,从而实现inner在wraper中的水平垂直居中。
第二种方法:使用display:flex实现
这种方法面试当时也是没有想到,面试的hr也提醒了我使用flex,但是确实没有实际操作过这个属性,实现的css代码如下:
该方法先将inner的父元素display属性设置成flex,再将inner的margin属性设置成auto,这里相当于(margin:auto auto;),可以将其简写成(margin:auto;),但是前提是其父元素display属性为flex。
第三种方法:使用负margin法实现(推荐:兼容性最好)
css代码如上图所示,先将inner父元素进行相对定位(position:relative;),再将inner进行绝对定位(position: absolute;),然后使用(top:50%;left:50%;)将inner这个div的左上顶点定位在wraper的正中央,之后通过负margin法将inner向左上方移动实现inner的水平垂直居中。
ps:此方法前提知道尺寸
第四种方法:使用css3中transform属性实现
此方法与负margin法有着异曲同工之妙,css代码如下:
该方法与负margin法极其相似,先将两个div定位,也是将inner这个div左上顶点定位在wraper的中心点,然后使用transform下的translate属性将inner向左上方移动,从而实现效果。
作者:孙以哲
未完,待续