父级元素高度为百分比的时候，怎么让子元素垂直居中
1个回答
展开全部
<div style="position:relative; border:1px solid blue; width:80%; height:40%; margin:10px">父元素的高度为40%
<div style="position:absolute; left:50%; top:50%; width:300px; height:120px; margin-left:-150px; margin-top:-60px; background-color:red">子元素固定宽高时的居中方法<br>宽300px，高120px</div>
</div>
<div style="position:relative; border:1px solid blue; width:80%; height:40%; margin:10px">父元素的高度为40%
<div style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background-color:green">子元素不固定宽高时的居中方法<br>需要css3支持</div>
</div>
<div style="position:absolute; left:50%; top:50%; width:300px; height:120px; margin-left:-150px; margin-top:-60px; background-color:red">子元素固定宽高时的居中方法<br>宽300px，高120px</div>
</div>
<div style="position:relative; border:1px solid blue; width:80%; height:40%; margin:10px">父元素的高度为40%
<div style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background-color:green">子元素不固定宽高时的居中方法<br>需要css3支持</div>
</div>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
