在前端页面的布局方面,很多时候需要用到垂直居中,如果父集元素或子元素的高度是固定的那么垂直居中可以用line-height或者定位 top:50%;margin-top:- height/2 px;实现,那么如果父元素的高度和子元素的高度都不是固定值呢?
下面就总结一下使用css进行垂直居中布局的方法及使用环境。最好用的在最后。
html 使用如下:
<div class="parent">
<div class="child"> </div>
</div>
1.父元素高度与子元素高度差值为固定值,对父元素使用padding使子元素居中
当父元素与子元素差值为固定值 H px 时,可以对父元素使用上下边的padding:H/2 px; 把子元素居中。
.parent{ width:200px; height:auto; padding:50px 0; background-color: #13B202; } .child{ width: 40px;height: 40px; margin:0 auto; background-color: #000; }
效果如下:
2. 父集高度为固定值,父集使用 line-height ,子集使用 display:inline-box ;
对父元素使用line-height:父集的高度;
由于line-height只对行元素有效果,所以改变子元素的display属性为inline-block,这样,行元素即可以有行元素属性,又能够像块元素一样设置宽高。
最后对子元素设置vertical-align: middle; 使其在行高内垂直居中,这样居中布局就实现了。
.parent{ width: 200px; height: 200px; text-align: center; line-height: 200px; background-color: #13B202; } .child{ display: inline-block; width: 40px;height: 40px; vertical-align: middle; background-color: #000; }
效果如下:
3.子元素高度固定,如果需要横向居中,子元素宽度也需固定,对子集使用定位 使其居中。
当子元素 的高度固定,无论父元素高度如何变化,子元素都可以通过 top:50%; margin-top: - 子元素高度/2 px ;使其垂直居中,这种一般用于父集高度不固定,会随着屏幕高度或者其他因素变化的情况使用,例如弹窗的垂直居中。对于水平方向的居中也一样,使用left:50%;margin-left:-子元素宽度/2 px ;
.parent{ position: relative; width: 100%; height: 100%; background-color: #13B202; } .child{ position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; background-color: #000; }
效果如下:
4. 父元素高度不固定,子元素高度也不固定 。
这种情况下上面列出的都不能使用,当遇到这种情况时确实很让人头疼,不知如何是好,那么使用css3的 box-align 和 box-pack 进行水平居中,使用align-items进行垂直居中。
这种情况下,无论父元素和子元素宽高如何变化,子元素都能够保持水平和垂直居中显示。唯一不足之处就是对于不支持CSS3的浏览器不能使用。
.parent{ width: 200px; height: 200px; background-color: #13B202; display: flex; display: -webkit-flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .child{ width: 40px; height: 40px; background-color: #000; }
效果如下:
5. 使用定位 和 css3 的 transform 属性, 对.child 定位 left: 50%; top: 50%; transform: translate(-50%,-50%);
无论父级和子集的宽高如何变化,它都能实时居中,吼吼吼,效果图就不放了哈哈哈~