不定宽高的文字在div中垂直居中实现方法

本人在面试的时候被问到：如何使一段不定宽高的文字垂直居中呢？

现在来总结一下：

在body中写入结构

div id="main">
        div id="login">
            djshdk awjdsd sede sfcDF vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.    /div>
    /div>
    

方法一：

#main{
    posITion: relative;
        //在父元素中使用相对定位width: 200px;
    height: 200px;
    overflow: hidden;
    background-color: #ff0;
    padding: 10px;
}
#LOGin{
    position: absolute;
       /*在子元素中使用绝对定位*/top:50%;
                    /*距离相对于父元素的50%的高*/left:50%;
    background-color: #eee;
    -webkit-transform:translate(-50%,-50%);
    /*CSS3的样式，:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/}
    

方法二：

#main{
    width: 200px;
    height: 200px;
    background-color: #eee;
    display: table;
    /*让标签元素以表格的形式呈现*/}
#login{
    display: table-cell;
        /*ie7和ie6都不能识别 display: table-cell;
    */vertical-align: middle;
}
    

以上这篇不定宽高的文字在div中垂直居中实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！