盒⼦⽔平垂直居中10种⽅法
盒⼦⽔平垂直居中10种⽅法
HTML代码
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
第⼀种：通过绝对定位的⽅式 absolute + 负margin
⾸先知道⼦元素的宽⾼，给⼦元素设置top：50%；left：50%，
但绝对定位是基于⼦元素的左上⾓，我们所希望的效果是⼦元素的中⼼居中显⽰。。。。借助外边距的负值，负的外边距可以让元素向相反⽅向定位，
通过指定⼦元素的外边距为⼦元素宽度⼀半的负值，就可以让⼦元素居中了
#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin: -100px -100px;
background-color: #0ff;
}
优点：⽐较好理解，兼容性好
缺点：需要知道⼦元素的宽⾼
第⼆种：也是通过绝对定位的⽅式 absolute + margin auto
这个是需要将各个⽅向的距离都设0，再讲margin设为auto；就⾏
优点：兼容性也很好
缺点：需要知道⼦元素的宽⾼
第三种：absolute + calc（计算）
这种⽅法top的百分⽐是基于元素的左上⾓，那么在减去宽度与⾼度的⼀半就好了
calc：任何长度值都可以使⽤calc()函数进⾏计算；
calc()函数使⽤标准的数学运算优先级规则；
它⽀持 “+”, “-”, “*”, “/” 运算
优点：他的兼容性依赖的是calc的兼容性
缺点：同样是需要知道⼦元素的宽⾼
第四种：absolute + transform （过渡）
这个⽅法不需要⼦元素固定宽⾼
修复绝对定位的问题，还可以使⽤css3新增的transform，transform的translate
属性也可以设置百分⽐，其是相对于⾃⾝的宽和⾼，所以可以将translate设置为-50%，就可以做到居中了
#container {
position: relative;
width: 600px;
div中的div居中height: 600px;
border: 1px solid #000;
margin: auto;
}
#box {
position: relative;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #0ff;
}
优点：代码量少
缺点： IE8不⽀持, 属性需要追加浏览器⼚商前缀, 可能⼲扰其他 transform 效果, 某些情形下会出现⽂本或元素边界渲染模糊的现象.第五种：line-height
只对⽂本有效果，对定宽⾼的div是没有⽤的。所以在⽂本⽔平垂直居中时使⽤。
优点：代码简洁
缺点：只对⽂本有效，只对单⾏⽂本有效，多⾏⽂本不可以
第七种：table 形式
通过table单元格的形式设
优点： tabel单元格中的内容天然就是垂直居中的，只要添加⼀个⽔平居中属性就好了
缺点：这个不是table的正确⽅法，不是很建议使⽤，但是也是可以实现的
第⼋种：table-cell实现⽔平垂直居中: table-cell middle center组合使⽤
直接给⽗级设
#container {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
第九种：弹性盒⼦的⽅式
#container {
width: 600px;
height: 600px;
border: 1px solid #000;
display: flex
justify-content: center;
align-items: center;
}
优点：移动端使⽤灵活⾃如
缺点： pc端需要根据兼容情况来判定
第⼗种：grid（⽹格布局）
给⽗级设display:grid;
给⼦元素设align-self: center;justify-self: center;
优点：代码量少
缺点：兼容不如flex，建议⽤flex

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。