未知高度多行文本垂直居中

方法一,使用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;

    }
时间: 2024-10-22 16:59:31

未知高度多行文本垂直居中的相关文章

div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有 valign特性的元素才生 效,例如表格元素中的<td>.<th>.<caption>等,而 像<div>.<span>这样的元素是没有valign特性的,因此使用verti

css实现固定高度及未知高度文字垂直居中的完美解决方案

在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字的话使用height(高度)和line-height(行高)来解决,但是假如页面有多行文字的话 固定高度该怎么解决? 或者未知高度我们该用css怎么解决? 且兼容各个游览器! 一:单行文字垂直居中: 如果一个容器中只有一行文字的话,让他垂直居中比较简单 直接定义height(高度)和 line-height(

如何让未知高度div垂直居中

如何让未知高度div垂直居中:让div垂直居中对齐方法有多种多样,可以使用CSS让div在父元素中垂直居中,但是如果在不知道div高度的情况下将其在父元素中实现它的垂直居中对齐有难度,因为涉及到浏览器兼容性,下面就介绍一下通过js让未知高度的div在父元素中垂直居中,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm

CSS总结(六)——元素的垂直居中(已知高度/未知高度)

元素的垂直居中 1.已知高度宽度元素的水平垂直居中 ①  绝对定位居中 .center{ margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; } ②  绝对定位与负边距实现 .center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; } 2.未知高度宽度元素的水平垂直居中 ①  当元

未知高度的图片垂直居中

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>未知高度的图片垂直居中</title> 6 <meta name="author" content="http://www.cnblogs.com/leafsummer?qq=11580563"> 7 <style>

关于未知高度的垂直居中

1.内容为纯文字的时候的垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>未知高度垂直居中</title> <style type="text/css"> .box{width: 200px;height: 500px;background-color: yello

兼容各个浏览器的未知高度div垂直居中效果

兼容各个浏览器的未知高度div垂直居中效果:让div垂直居中与它的父对象中,并不像是让div在父元素中水平居中那么简单,只要简单的为此元素设置margin:0px auto即可,虽然将一些属性配合使用也可以将div垂直居中与父元素中,但是在某些浏览器中并不兼容,下面就介绍一种兼容各大浏览器的方式.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

CSS实现未知高度图文混合垂直居中

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 CSS* { margin:0; padding:0; list-style:none;} #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:r

未知高度定宽div水平居中及垂直居中(兼容ie6及其他牛逼浏览器)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1