前端样式CSS水平垂直居中的十中方法

前言：

首先我们先来了解下什么是CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

进入正题今天给大家分享的是CSS水平居中的十种方法具体如下：

一、通过绝对定位的方式 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

可以参考：菜鸟官网详解

这种方法稍微有些复杂，writing-mode可以改变文字的显示方向

七、table 形式

通过table单元格的形式设

优点：*abel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

缺点：这个不是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

​

总结：

以上就是CSS水平垂直居中的十种方法,原创不易，期待您的点赞关注与转发评论😜😜😜