请收下这份CSS元素居中终极指南

水平居中

1.行内元素

行内元素特征：

（1）宽高就是内容的高度，不可以改变

（2）对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

（3）和其他元素都在一行，不会自动进行换行

（4）行内元素只能行内元素，不能包含块级元素

（5）可通过 display:inline 转换成行内元素

常见的行内元素：

button、img、 input、label、span、textarea、select（下拉列表）....

​ 若是行内元素，给其父元素设置text-align:center即可实现行内元素水平居中

    居中
 

2.块状元素

块状元素特征：

（1）能够识别宽高，宽度没有设置时默认为100%

（2）margin和padding的上下左右均对其有效

（3）可以自动换行

（4）多个块状元素标签写在一起，默认排列方式为从上至下

（5）可通过 **display:block** 转换成块状元素

（6）块级元素中可以包含块级元素和行内元素

常见的块状元素：

div、p、ul、ol、li、aside、h、form、table 等语义化标签....

2.1 宽高固定

当宽高固定时，以下HTML示例：

添加上以下四种CSS方式都能达到水平居中的效果：

方式一：margin: 0 auto

方式二： absolute + margin-left

方式三： absolute + calc

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用 calc() 函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

方式四：absolute + left + right + margin

2.2 宽高不定

当宽高不定时，以下测试示例：

  
测试示例

以下三种方式显示效果均为：

方式一：使用CSS3中新增的 transform 属性

transform 属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate(x,y)定义2D变换

translate3d(x,y,z)定义3D变换

方式三：width: fit-content

添加以下五种方式的css代码即可实现垂直居中的效果

单行文本

设置 line-height

方式二：display : inline-block+vertical-align 隐式幽灵节点

设置幽灵节点的高度以及幽灵节点的基线（通过line-height），来设置幽灵节点的x-height，是span的中线与幽灵节点的中线对齐，同样也可以使vertical-align:middle;居中

   

  测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例

方式三：writing-mode 布局

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

• horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
• vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
• vertical-lr：垂直方向内内容从上到下，水平方向从左到右
• sideways-rl：内容垂直方向从上到下排列
• sideways-lr：内容垂直方向从下到上排列

方式四：display:grid 布局

添加以下几种CSS方式均可实现垂直居中的效果。

方式一：absolute+margin-top

方式二：absolute + calc

方式三：absolute+left+right+top+bottom

2.2 宽高不定

当宽高不定时，HTML示例：

  
测试示例

以下几种css方式都能实现以下垂直居中的效果：

方式一：使用CSS3中新增的transform属性

需要设置parent为相对定位（position:relative）

关注我的公主号：昕之一方，欢迎交流~

参考资料：CSS 实现元素水平垂直居中的 N 种方式

文中所涉及代码：https://gitee.com/xin-yue-qin/center_style