1. 多个子元素水平并排，ie10以下失效
display: flex; align-items: center; justify-content: center;
![[CSS] 子元素垂直居中的两种方式](https://img.php.cn/upload/article/000/000/013/cb865a4ad56826c2550cdf305afe4cbb-0.png "[CSS] 子元素垂直居中的两种方式")
2.多个子元素竖直排列，这种方式会导致margin失效，IE8以下失效
立即学习“前端免费学习笔记（深入）”；
display: table-cell; vertical-align: middle;
![[CSS] 子元素垂直居中的两种方式](https://img.php.cn/upload/article/000/000/013/f31e7fed803d25572ac5dfedbf57c918-1.png "[CSS] 子元素垂直居中的两种方式")
更多[CSS] 子元素垂直居中的两种方式 相关文章请关注PHP中文网！
0
0
[CSS] 子元素垂直居中的两种方式
高洛峰
发布时间：2017-02-21 10:59:03
|2344人浏览过
|来源于php中文网
原创
相关文章
css 框架中的 Flexbox 布局_如何使用框架实现响应式设计
css 网格容器内元素无法垂直居中怎么办_使用 align items center
css文本对齐属性_text-align与vertical-align的使用
css两个元素上下间距异常怎么回事_解析margin重叠的盒模型规则
css弹性盒子布局子元素无法居中怎么办_利用justify content和align items实现水平垂直居中
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
