目前收集整理出了8种块级元素垂直居中对齐的方法
第一种方法 利用定位+估算
1 .parent{ 2 200px; 3 height: 200px; 4 position: relative; 5 background: #888888; 6 } 7 .child{ 8 50px; 9 height: 50px; 10 text-align: center; 11 line-height: 50px; 12 position: absolute; 13 top: 75px; 14 left: 75px; 15 background: brown; 16 }
第二种方法 定位+margin：auto
1 .parent{ 2 200px; 3 height: 200px; 4 position: relative; 5 background: #888888; 6 } 7 .child{ 8 50px; 9 height: 50px; 10 text-align: center; 11 line-height: 50px; 12 position: absolute; 13 top: 0; 14 left: 0; 15 bottom: 0; 16 right: 0; 17 margin: auto; 18 background: brown; 19 }
第三种方法 定位+margin值估算，子元素高度不固定
1 .parent{ 2 200px; 3 height: 200px; 4 position: relative; 5 background: #888888; 6 } 7 .child{ 8 position: absolute; 9 top: 50%; 10 left: 50%; 11 margin-left: -25px; 12 margin-top: -25px; 13 text-align: center; 14 line-height: 50px; 15 background: brown; 16 }
第四种方法 定位+transform：translate
1 .parent{ 2 200px; 3 height: 200px; 4 position: relative; 5 background: #888888; 6 } 7 .child{ 8 50px; 9 height: 50px; 10 text-align: center; 11 line-height: 50px; 12 position: absolute; 13 top: 50%; 14 left: 50%; 15 transform: translate(-50%,-50%); 16 background: brown; 17 }
第五种方法 定位+calc函数
1 .parent{ 2 200px; 3 height: 200px; 4 position: relative; 5 background: #888888; 6 } 7 .child{ 8 50px; 9 height: 50px; 10 text-align: center; 11 line-height: 50px; 12 position: absolute; 13 left: calc(50% - 25px); 14 top: calc(50% - 25px); 15 background: brown; 16 }
第六种方法 子元素设置display:inline-block
1 .parent{ 2 200px; 3 height: 200px; 4 text-align: center; 5 line-height: 200px; 6 background: #888888; 7 } 8 .child{ 9 50px; 10 height: 50px; 11 line-height: 50px; 12 display: inline-block; 13 vertical-align: middle; 14 background: brown; 15 }
第七种方法 父元素设置display:table，子元素大小不固定，并设置display：table-cell
1 .parent{ 2 200px; 3 height: 200px; 4 display: table; 5 text-align: center; 6 line-height: 200px; 7 vertical-align: middle; 8 background: #888888; 9 } 10 .child{ 11 display: table-cell; 12 background: brown; 13 }
第八种方法 弹性布局display:flex 子元素高度不固定
1 .parent{ 2 200px; 3 height: 200px; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 background: #888888; 8 } 9 .child{ 10 50px; 11 height: 50px; 12 text-align: center; 13 line-height: 50px; 14 background: brown; 15 }