码库记事本

码库记事本

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

小诸哥 0

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

现在来总结一下:

在body中写入结构

  1. <div id="main">
  2.      <div id="login">
  3.          djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.
  4.      </div>
  5. </div>
  6.  

方法一:

  1. #main{
  2. position: relative; //在父元素中使用相对定位
  3. width: 200px;
  4. height: 200px;
  5. overflow: hidden;
  6. background-color: #ff0;
  7. padding: 10px;
  8. }
  9. #login{
  10. position: absolute; /*在子元素中使用绝对定位*/
  11. top:50%; /*距离相对于父元素的50%的高*/
  12.  
  13. left:50%;
  14.  
  15. background-color: #eee;
  16. -webkit-transform:translate(-50%,-50%); /*css3的样式,:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/
  17. }
  18.  

方法二:

  1. #main{
  2. width: 200px;
  3. height: 200px;
  4. background-color: #eee;
  5. display: table; /*让标签元素以表格的形式呈现*/
  6. }
  7. #login{
  8. display: table-cell; /*ie7和ie6都不能识别 display: table-cell;*/
  9. vertical-align: middle;
  10. }
  11.  

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

标签: 实现 方法