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

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

现在来总结一下：

在body中写入结构

djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.

方法一：

#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中垂直居中实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。