首页 > 代码库 > 未知高度多行文本垂直居中
未知高度多行文本垂直居中
方法一,使用display:inline-block+伪元素
<div class="mask"> <div class="dialog"> 未知宽高元素窗口水平垂直居中(拖动右下角改变宽高)" </div> </div>
.mask{ position: fixed; left: 0; top:0; height: 100%; width: 100%; text-align: center; background-color: rgba(200, 200, 200, .2); } .mask:after{ content: " "; display: inline-block; vertical-align: middle; height: 100%; } .dialog{ display: inline-block; border: 3px solid lightblue; }
方法2: 使用display:table-cell
.parent { width: 100px; height: 150px; display: table; background: #f66; } .child{ display: table-cell; vertical-align: middle; }
未知高度多行文本垂直居中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。