一个高度不固定的div，里面的文字如何垂直居中？
<div><divstyle="height:50%">这里是文字</div></div>恳请高手解答！...
<div>
<div style="height:50%">
这里是文字
</div>
</div>
恳请高手解答！ 展开
<div style="height:50%">
这里是文字
</div>
</div>
恳请高手解答！ 展开
13个回答
展开全部
我也找了老半天，后来发现一个很强势的写法 简单暴力
// 加在父级div中
垂直居中：align-items:center; display: -webkit-flex;
水平居中：justify-content:center; display: -webkit-flex;
// 加在父级div中
垂直居中：align-items:center; display: -webkit-flex;
水平居中：justify-content:center; display: -webkit-flex;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上下垂直居中 在线演示 DIVCSS</title>
<style>
#main {position: absolute;width:500px;height:300px;left:50%;top:50%;
margin-left:-250px;margin-top:-150px;background: #000;}
</style>
<body>
<div id="main"></div>
</body>
</html>
这是上下左右垂直居中效果图如下：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.div1{ height: 500px; background-color: red; display: table;}
.div2{ display: table-cell; vertical-align: middle; text-align: center; }
<div class="div1">
<div class="div2" >
这是一个一半的高度
</div>
</div>
.div2{ display: table-cell; vertical-align: middle; text-align: center; }
<div class="div1">
<div class="div2" >
这是一个一半的高度
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
line-height 行高，text-align:center文字居中，调这两个就差不多了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="height:50%;display:table-cell;vertical-align:middle">
这里是文字
</div>
这里是文字
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
