DIV撑满剩余高度,未知高度垂直居中

本文介绍如何使用CSS3的translate属性实现元素的垂直居中及水平居中效果,并演示了两种方法来使div元素撑满剩余的高度,适用于网页布局设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值