不定宽高的文字在不定宽高的文字在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中垂直居中实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家
多多支持软件开发网。
资源评论
weixin_38711008
- 粉丝: 8
最新资源
- Aestate-Python资源
- 网络营销和策划.pptx
- YKSwiftNetworking-Swift资源
- 三星中小企业网络安全解决方案.doc
- 通信原理教学.pptx
- 网络程序员工作计划样本.doc
- 我爱我家(主题网络)(20220208022735).pdf
- 公司通信调度系统技术规范及技术方案书.docx
- 网络营销与策划实践环节考核.doc
- 物联网简介幻灯片.ppt
- 华为网络认证工程师.docx
- 基于ARM的Buck-Boost双向DC-DC电源变换器：同步BUCK与BOOST电路级联的数字稳压技术
- 计算机科学与技术专业的知识体系与课程体系.pptx
- 网络推广协议范本最新.doc
- 2023年电子商务基础测试题库.doc
- 酒店住宿及消费管理系统数据库.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
