最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

不定宽高的文字在div中垂直居中的三种方法

来源:动视网 责编:小采 时间:2020-11-27 18:52:02
文档

不定宽高的文字在div中垂直居中的三种方法

不定宽高的文字在div中垂直居中的三种方法:本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢?现在来总结一下:在body中写入结构<div id="main"> <div id="login"> djshdk awjdsd sede sfcdf vdj sh dkaw jds dse
推荐度:
导读不定宽高的文字在div中垂直居中的三种方法:本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢?现在来总结一下:在body中写入结构<div id="main"> <div id="login"> djshdk awjdsd sede sfcdf vdj sh dkaw jds dse


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

现在来总结一下:

在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中垂直居中的三种方法

不定宽高的文字在div中垂直居中的三种方法:本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢?现在来总结一下:在body中写入结构<div id="main"> <div id="login"> djshdk awjdsd sede sfcdf vdj sh dkaw jds dse
推荐度:
标签: 方法 垂直居中 div
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top