垂直居中原_ 字节宝

垂直居中原

2019-04-04 11:30:05 浏览数 (1)

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

代码语言：javascript复制

<!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% 无效，如果居中

代码语言：javascript复制

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

代码语言：javascript复制

    <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({});

fixed height position transform window

0 人点赞

垂直居中 原

垂直居中原