垂直居中

時間 2019-11-07

標籤垂直居中简体版

原文原文鏈接

垂直居中的方法不少，通常經常使用的方法css

一、設置height和line-height；html

二、display:table-cell,vertical-align:middle，若是想佔100%，能夠把寬度設置比較小的百分好比width:1%; 至於爲何，我暫時還不太清楚；code

三、設置transform:translate(0,-50%)；orm

最近看到也能夠使用另外一種方法實現垂直居中htm

<!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% 無效，若是居中it

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。