css3 transform:translateY 未知垂直水平居中

// 相对于父组件进行绝对定位，top 50%， 再 用CSS3属性 transform: translateY(-50%) 设置Y轴-50%即可

parentElement{
        position:relative;
    }

 childElement{
    width: 200px;
    height: 209px;
    background: red;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;

 }

DIV撑满剩余高度

方法一：绝对定位

<style> 

    #box{
        background:black;
        height:600px;
        position: relative;
    }

    #uncle{
        background: blue;
        height: 200px;
        width:100%
    }

	#father{
         // 父级box需要相对定位，要撑满的div部分用绝对定位，和top,bottom固定视口，width100%撑满剩下的部分
        background: red;
        width:100%;
        position:absolute;
        top:200px;
        bottom:0;  
    }
 	#son{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translateY(-50%);
 		background:yellow;
        transform: translateX(-50%)
 	}

</style>

<body>
    <div id="box">
        <div id="uncle">固定内容</div>
        <div id="father">要撑满全部高度的DIV
            <div id="son">未知高度要垂直居中，水平居中的内容</div>
        </div>
    </div>
</body>

注：Position:absolute是相对于他最近一个祖先节点定位，该祖先节点必须有postion:absolute, relative, fixed 的属性，如若没有，就相对于body做绝对定位

方法二：浮动

<style>
		.parent {
			height: 500px;
			width: 300px;
			border: 1px solid red;/***/
			padding: 2px 2px;/***/
		}
		
		.nav {
			height: 100px;
			width: 100%;/*必须沾满宽度防止浮动*/
			float: left;/*必须*/
			background-color: red;
		}
		
		.content {
			height:100%;/*必须*/
			background-color: green;
		}
	</style>
 
	<body>
		
		<div class="parent">
			<div class="nav">
				固定高度
			</div>
			<div class="content">
				自适应父容器, 充满剩余的空间 
			</div>
		</div>
 
	</body>

上面的 div浮动，下面的DIV自动会填上，并设置为height：100%就OK

原文链接：https://blog.csdn.net/chose_DoIt/article/details/79714562