[CSS] 子元素垂直居中的兩種方式
- 高洛峰原創
- 2017-02-21 10:59:032071瀏覽
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中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn