css各种垂直居中写法总结

1>设置display:table-cell 淘宝font-size法
.box1{ display:table-cell;text-align:center;vertical-align:middle;/ie67垂直居中/font-family:simsun;font-size:200px;}.box1 img{}

2>设置display:table-cell 绝对定位法
.box{ display:table-cell;vertical-align:middle; position:relative;}.box p{position:absolute;top:50%;width: 100%;text-align: center;}.box img{position:relative;*top:-50%;}

3>绝对居中ie8以上支持
.box2{position:relative;}.bd{width:50%;height:50%;margin:auto;position:absolute;text-align: center; left:0;top:0;right:0; bottom:0;border:1px #ccc dashed;}.bd span{vertical-align: middle;line-height: 150px;}

ie8以上支持

4>固定高度的多行文本居中
.box4{line-height: 300px;border: 1px dashed #cccccc;font-size: 0;height: 300px;text-align: center;}.box4 span{display: inline-block;line-height: 24px;vertical-align: middle;font-size: 15px;}

多行文本固定高中垂直居中固定高度的多行文本居中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,703评论 1 92
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 11,106评论 2 2
  • 大小不固定的图片和多行文字的垂直水平居中一、大小不固定,多行文字的垂直居中① 单行文字可能很多人都知道如何让单行文...
    Wang_Yong阅读 3,978评论 0 0
  • 白云占满了天空, 蓝色的它, 竟显白色的容颜。 仿佛被云朵侵占。 但却自愿似的。 无反抗之意。 尤如爱人, 改变了...
    再见了受伤的昨天阅读 1,549评论 0 6
  • 一大早上,韩府就发出杀猪声:娘!我不嫁。哎哟!我的大小姐!你看人家长得又帅,又有钱。你怎么就不见了呢
    时小念阅读 2,361评论 0 0

友情链接更多精彩内容