盒子水平垂直居中10种方法
HTML代码
第一种:通过绝对定位的方式 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;
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
如果觉得《html设置盒子水平垂直居中 盒子水平垂直居中10种方法》对你有帮助,请点赞、收藏,并留下你的观点哦!