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

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

现在来总结一下：

在body中写入结构

<div id=" ;m  ai n">
    <div id="lo gin ">
        djshdk awjdsd sede s fc  DF  vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.
    </div>
</div>

方法一：

 # main{
pos IT ion: relative;    //在父元素中使用相对定位
width: 200px;
h ei ght: 200px;
overflow: hidden;
background-color: #ff0;
padding: 10px;
}
# LOG in{
position: absolute;   /*在子元素中使用绝对定位*/
top:50%;                /* 距离 相对于父元素的50%的高*/

left:50%;

background-color: #eee;
- webkit  -t ransform:translate(-50%,-50%);    /*CSS3的样式，:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/
}

方法二：

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

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

总结

以上是 为你收集整理的 不定宽高的文字在div中垂直居中实现方法 全部内容，希望文章能够帮你解决 不定宽高的文字在div中垂直居中实现方法 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于不定宽高的文字在div中垂直居中实现方法的详细内容...