垂直居中原

tianyawhl

发布于 2019-04-04 11:30:05

8980

发布于 2019-04-04 11:30:05

垂直居中的方法很多，一般是设置line-height,display:table-cell,vertical-align:middle，或者transform:translate(0,-50%),最近看到也可以使用另一种方法实现垂直居中

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</title> 
    <style type="text/css">
    //注释掉的是全屏铺满，用于loading的遮罩层
	.parent{<!-- position:fixed;width:100%;height:100%;left:0;top:0;background:gray; -->}
	.parent{position:relative;width:300px;height:300px;background:gray;}
	.child{width:100px;height:100px;position:absolute;left:0;top:0;right:0;bottom:0;background:pink;margin:auto;}
	</style>
   </head>
	
   <body>
     <div class="parent">
	   <div class="child"></div>
	 </div>
   </body>
</html>

主要用到的position:absolute;left:0;top:0;right:0;bottom:0;以及margin:auto;

注意：如果父级用position:fixed，即使父级是满屏，子级的元素用width:100%，与height:100% 无效，如果居中

<div class="pro">
    <div class="proText">0%</div>
</div>

    <style type="text/css">
    .pro {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: #999;
    }

    .proText {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    </style>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017/10/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

fixed