绝对居中问题
基本思路:将设置了绝对定位的子元素水平和垂直偏移50%,然后在水平和垂直方向分别偏移负自身宽高的一半,示意图如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| <div id="parent"> <div id="son"> <div id="cont"></div> </div> </div>
<style> #parent{ width: 500px; height: 300px; position: relative; background-color: rgb(46,95,62); }
#son{ width: 250px; height: 150px; position: absolute; left: 50%; top: 50%; }
#cont{ width: 100%; height: 150px; margin-left: -50%; margin-top: -75px; background-color: rgb(23,48,31); } </style>
|
- 优点:兼容性好,代码量少
- 不足:子元素的宽高需要确定,对于高度自适应的容器会带来问题,建议把盒子设置成box-sizing:border-box
基本思路:将设置了绝对定位的子元素水平和垂直偏移50%,然后用transforms属性值将子元素偏移负自身宽高的一半
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <div id="parent"> <div id="son"></div> </div>
<style> #parent{ width: 500px; height: 300px; position: relative; background-color: rgb(46,95,62); }
#son{ width: 250px; height: 150px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: rgb(23,48,31); } </style>
|
- 优点:支持子容器高度自适应;适用于响应式布局环境;移动浏览器支持较好;代码量少
- 不足:不支持IE8及以西啊浏览器;需要添加浏览器私有前缀;translate可能受transform其他子属性值的影响
基本思路:通过display中的table和table-cell属性,模拟表格布局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <div id="parent"> <div id="son"> <div id="cont"></div> </div> </div>
<style> #parent{ width: 500px; height: 300px; display: table; background-color: rgb(46,95,62); }
#son{ display: table-cell; vertical-align: middle; }
#cont{ width: 50%; height: 50%; margin: auto; background-color: rgb(23,48,31); } </style>
|
- 优点:支持高度自适应;可适应响应式环境;适用于多个子元素水平垂直居中环境;兼容性好;
- 不足:需要额外标签
基本思路:将子容器和任一伪元素设置为行内块及水平居中,然后对父容器文本居中,示意图如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <div id="parent"> <div id="son"></div> </div>
<style> #parent{ width: 500px; height: 250px; text-align: center; overflow: auto; background-color: rgb(46,95,62); }
#parent:after{ content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }
#son{ width: 250px; height: 150px; display: inline-block; vertical-align: middle; background-color: rgb(23,48,31); } </style>
|
- 优点:支持子元素高度自适应;适应于多个子元素水平垂直居中环境;兼容性良好,IE7及以上支持
- 不足:当存在多个子容器时,注意盒子之间的间隙
5. 伸缩盒模型 在线示例
基本思路:使用flexbox弹性盒模型设置居中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <div id="parent"> <div id="son"></div> </div>
<style> #parent{ width: 500px; height: 300px; background-color: rgb(46,95,62); display: flex; align-items: center; justify-content: center; }
#son{ width: 250px; height: 150px; background-color: rgb(23,48,31); } </style>
|
- 优点:不需要设置子元素的宽高;适用于任意子元素水平垂直居中环境;
- 不足:IE10及以上兼容,高级浏览器也部分存在兼容问题;需要添加浏览器私有前缀;可能存在性能问题。
6. 绝对居中块 在线示例
基本思路:设置子元素外边距auto及四个方向的偏移值为0做到水平垂直居中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <div id="parent"> <div id="son"></div> </div>
<style> #parent{ width: 500px; height: 300px; background-color: rgb(46,95,62); position: absolute; }
#son{ width: 40%; height: 40%; background-color: rgb(23,48,31); margin: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; } </style>
|
- 优点:支持IE8及以上;代码量少,便签结构简单;通过用%设置宽高值实现适用于响应式环境的目的
- 不足:高度必须定义