--- theme: cyanosis --- **小知识，大挑战！本文正在参与“** **[程序员必备小知识](https://juejin.cn/post/7008476801634680869 "https://juejin.cn/post/7008476801634680869")** **”创作活动**
**本文同时参与** **[「掘力星计划」](https://juejin.cn/post/7012210233804079141 "https://juejin.cn/post/7012210233804079141")** **，赢取创作大礼包，挑战创作激励金** ![css元素水平垂直居中脑图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f8748ad57b74f41b26cc3623174eac3~tplv-k3u1fbpfcp-zoom-1.image) # 水平居中 ## 1.行内元素 > **行内元素特征：** > > （1）宽高就是内容的高度，不可以改变 > > （2）对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间 > > （3）和其他元素都在一行，不会自动进行换行 > > （4）行内元素只能行内元素，不能包含块级元素 > > （5）可通过 `display:inline` 转换成行内元素 > **常见的行内元素：** > > button、img、 input、label、span、textarea、select（下拉列表）.... 若是行内元素，给其父元素设置`text-align:center`即可实现行内元素水平居中 ```

居中

``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/596f5693a7154129b78c2e0cef5fb86e~tplv-k3u1fbpfcp-zoom-1.image) ## 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方式都能达到水平居中的效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a01dd5217c46478ab3f113dd0e645e73~tplv-k3u1fbpfcp-zoom-1.image) #### 方式一：margin: 0 auto ``` ``` #### 方式二： absolute + margin-left ``` ``` #### 方式三： absolute + calc > **calc() 函数用于动态计算长度值。** > > - 需要注意的是，运算符前后都需要保留一个空格，例如：`width: calc(100% - 10px)`； > - 任何长度值都可以使用 calc() 函数进行计算； > - calc()函数支持 "+", "-", "*", "/" 运算； > - calc()函数使用标准的数学运算优先级规则； ``` ``` #### 方式四：absolute + left + right + margin ``` ``` ### 2.2 宽高不定当宽高不定时，以下测试示例： ```

测试示例

``` 以下三种方式显示效果均为： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a28dc4274daa4f49bdf3694c57d5bcb1~tplv-k3u1fbpfcp-zoom-1.image) #### 方式一：使用CSS3中新增的 transform 属性 > transform 属性允许我们对元素进行旋转、缩放、移动或倾斜。 > > translate(x,y)定义2D变换 > > translate3d(x,y,z)定义3D变换 ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9ccd5adaa6f4bc7b2703b1211351c73~tplv-k3u1fbpfcp-zoom-1.image) #### 方式三：width: fit-content ``` ``` 添加以下五种方式的css代码即可实现垂直居中的效果 **单行文本** #### 设置 line-height ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc3621c7926a4384a4a6320ec1c75d79~tplv-k3u1fbpfcp-zoom-1.image) #### 方式二：display : inline-block+vertical-align 隐式幽灵节点设置幽灵节点的高度以及幽灵节点的基线（通过`line-height`），来设置幽灵节点的`x-height`，是`span`的中线与幽灵节点的中线对齐，同样也可以使`vertical-align:middle;`居中 ```

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

``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00eeda300faa47938ac08369593888ce~tplv-k3u1fbpfcp-zoom-1.image) #### 方式三：writing-mode 布局 `writing-mode` 属性定义了文本在水平或垂直方向上如何排布。 > - horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom > - vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left > - vertical-lr：垂直方向内内容从上到下，水平方向从左到右 > - sideways-rl：内容垂直方向从上到下排列 > - sideways-lr：内容垂直方向从下到上排列 ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7667047590754093976119241bb8b55c~tplv-k3u1fbpfcp-zoom-1.image) #### 方式四：display:grid 布局 ``` ``` 添加以下几种CSS方式均可实现垂直居中的效果。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/958fc85a578d46c89df530edf5d7937f~tplv-k3u1fbpfcp-zoom-1.image) #### 方式一：absolute+margin-top ``` ``` #### 方式二：absolute + calc ``` ``` #### 方式三：absolute+left+right+top+bottom ``` ``` ### 2.2 宽高不定当宽高不定时，HTML示例： ```

测试示例

``` 以下几种css方式都能实现以下垂直居中的效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6eb9713a96f641a5a443543ce1614f96~tplv-k3u1fbpfcp-zoom-1.image) #### 方式一：使用CSS3中新增的transform属性需要设置parent为相对定位（`position:relative`） ``` ``` 参考资料：[CSS 实现元素水平垂直居中的 N 种方式](https://mp.weixin.qq.com/s?__biz=MzA4Nzg0MDM5Nw==&mid=2247502765&idx=2&sn=576fa14138947be3d3b8257d2897b2f8&scene=21#wechat_redirect) 文中所涉及代码：https://gitee.com/xin-yue-qin/center_style