CSS中百分比高度的div中单行文字垂直居中，怎么实现？
不要拉网上的什么line-height,padding.来告诉我。因为外层高度是百分比不确定，line-height，padding都做不到真正居中。...
不要拉网上的什么line-height,padding.来告诉我。因为外层高度是百分比不确定，line-height，padding都做不到真正居中。
展开
2016-07-26 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
CSS中百分比高度的div中单行文字垂直居中实现方法：
1、css代码：
.table {
width:100%;
height:100%;
position:absolute;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%:
}
2、html代码：
<div class="table">
<div class="cell">Hello, I'm in the middle</div>
</div>
3、完整代码及运行结果：
<html>
<head>
<title>通过百分比控制文字垂直居中</title>
<style type="text/css">
.table {
width:100%;
height:100%;
position:absolute;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%:
}
</style>
</head>
<body>
<div class="table">
<div class="cell">通过百分比控制文字垂直居中</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以试试这样。
不知道你的具体dom结构。
.vv{height:100px;background:#000;}
.m{height:50%;background:#F00;}
.m i{display:inline-block;height:100%;width:1px;vertical-align: middle;}
.m span{display:inline-block;vertical-align: middle;background:#F99;}div class="vv">
<div class="m">
<i></i>
<span>单行文本居中</span>
</div>
</div>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
