前端:水平垂直居中的10种方法 |
您所在的位置:网站首页 › 前端表格内容居中怎么设置 › 前端:水平垂直居中的10种方法 |
第一种: 通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%;left:50%, 但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值,负的外边距可以让元素向相反方向定位, 通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了 优点: 比较好理解,兼容性好 缺点: 需要知道子元素的宽高 第二种: 也是通过绝对定位的方式 absolute + margin auto 这个是需要将各个方向的距离都设0,再讲margin设为auto;就行 优点: 兼容性也很好 缺点: 需要知道子元素的宽高 第三种: absolute + calc(计算) 这种方法top的百分比是基于元素的左上角,那么在减去宽度与高度的一半就好了 calc :任何长度值都可以使用calc()函数进行计算; calc()函数使用标准的数学运算优先级规则; 它支持 “+”, “-”, “*”, “/” 运算 也可以查看calc教程:https://www.runoob.com/cssref/func-calc.html 优点: 他的兼容性依赖的是calc的兼容性 缺点: 同样是需要知道子元素的宽高 第四种: absolute + transform (过渡) 这个方法不需要子元素固定宽高 修复绝对定位的问题,还可以使用css3新增的transform,transform的translate 属性也可以设置百分比,其是相对于自身的宽和高,所以可以将translate设置为-50%,就可以做到居中了 优点: 代码量少 缺点: IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象. 第五种: line-height 只对文本有效果,对定宽高的div是没有用的。所以在文本水平垂直居中时使用。优点:代码简洁 缺点:只对文本有效,只对单行文本有效,多行文本不可以 第六种: writing-mode 可以参考:https://www.runoob.com/cssref/css-pr-writing-mode.html 这种方法稍微有些复杂,writing-mode可以改变文字的显示方向 第七种: table 形式 通过table单元格的形式设 优点: tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了 缺点: 这个不是table的正确方法,不是很建议使用,但是也是可以实现的 第八种: table-cell实现水平垂直居中: table-cell middle center组合使用 直接给父级设 display: table-cell; vertical-align: middle; text-align: center;为了可以明显看出,我们可以给它设个宽高与边框 width: 240px; height: 180px; border:1px solid #666;第九种: 弹性盒子的方式 通过给父元素设置justify-content: center; align-items: center;就可以了 优点: 移动端使用灵活自如 缺点: pc端需要根据兼容情况来判定 第十种: grid(网格布局) 给父级设display:grid; 给子元素设align-self: center;justify-self: center; 优点: 代码量少 缺点: 兼容不如flex,建议用flex |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |