CSS 实现元素水平垂直居中的 N 种方式

开发 前端
可用 vertical-align 属性, 而 vertical-align 只有在父层为 td 或者 th 时, 才会生效,对于其他块级元素, 例如 div 、 p 等,默认情况是不支持的。

[[413004]]

本文转载自微信公众号「三分钟学前端」,作者sisterAn 。转载本文请联系三分钟学前端公众号。

水平居中

1. 行内元素

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

  1. <div class="parent"
  2.   <span class="child">测试</span> 
  3. </div> 
  4. <style> 
  5.   .parent { 
  6.     background-color: aqua; 
  7.     text-align: center; /* 水平居中 */ 
  8.   } 
  9.   .child { 
  10.     color: #fff; 
  11.     background-color: blueviolet; 
  12.   } 
  13. </style> 

2. 块级元素

2.1 宽高固定

当宽高固定时,以下 html 示例:

  1. <div class="parent"
  2.   <div class="child"></div> 
  3. </div> 
  4. <style> 
  5.   .parent { 
  6.     height: 100px; 
  7.     background-color: aqua; 
  8.   } 
  9.   .child { 
  10.     width: 100px; 
  11.     height: 100px; 
  12.     background-color: blueviolet; 
  13.   } 
  14. </style> 

以下四种方式显示效果均为:

方式一:margin:0 auto

  1. <style> 
  2.   .child { 
  3.     margin:0 auto; 
  4.   } 
  5. </style> 

方式二:absolute + margin-left

  1. <style> 
  2.   .child { 
  3.     position: absolute
  4.     margin-left: -50px; 
  5.     left: 50%; 
  6.   } 
  7. </style> 

方式三:absolute + calc

  1. <style> 
  2.   .child { 
  3.     position: absolute
  4.     left: calc(50% - 50px); 
  5.   } 
  6. </style> 

方式四:absolute + left + right + margin-left

  1. <style> 
  2.   .child { 
  3.     position: absolute
  4.     left: 0; 
  5.     right: 0; 
  6.     margin: 0 auto; 
  7.   } 
  8. </style> 

2.2 宽高不定

当宽高不定时,以下测试示例:

  1. <div class="parent"
  2.   <div class="child">测试示例</div> 
  3. </div> 
  4. <style> 
  5.   .parent { 
  6.     height: 100px; 
  7.     background-color: aqua; 
  8.   } 
  9.   .child { 
  10.     background-color: blueviolet; 
  11.     color: #fff; 
  12.   } 
  13. </style> 

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

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

  1. <style> 
  2.   .child { 
  3.     position: absolute
  4.     left: 50%; 
  5.     transform:translate(-50%, 0); 
  6.   } 
  7. </style> 

方式二:flex 布局

  1. <style> 
  2.   .child { 
  3.     display: flex; 
  4.     justify-content: center; 
  5.   } 
  6. </style> 

方式三:width: fit-content

  1. <style> 
  2.   .child { 
  3.     width: fit-content; 
  4.     margin: 0 auto; 
  5.   } 
  6. </style> 

fit-content 是 CSS3中 给 width 属性新加的一个属性值,它配合 margin 可以轻松实现水平居中

垂直居中

1. 行内元素

代码示例:

  1. <div class="parent"
  2.   <span class="child">测试示例</span> 
  3. </div> 
  4. <style> 
  5.   .parent { 
  6.     height: 100px; 
  7.     background-color: aqua; 
  8.     text-align: center; /* 水平居中 */ 
  9.   } 
  10.   .child { 
  11.     color: #fff; 
  12.     background-color: blueviolet; 
  13.   } 
  14. </style> 

方式一:line-height(单行文本)

  1. <style> 
  2.   .child { 
  3.     line-height: 100px; 
  4.   } 
  5. </style> 

当多行时会样式错乱,需要用到 vertical-align: middle 布局

方式二:display: table-cell + vertical-align (多行文本)

可用 vertical-align 属性, 而 vertical-align 只有在父层为 td 或者 th 时, 才会生效,对于其他块级元素, 例如 div 、 p 等,默认情况是不支持的。

为了使用 vertical-align ,我们需要设置父元素 display:table , 子元素 display:table-cell; vertical-align:middle;

  1. <style> 
  2.   .parent { 
  3.     display: table
  4.   } 
  5.   .child { 
  6.     display: table-cell; 
  7.     vertical-align: middle; 
  8.   } 
  9. </style> 

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

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

  1. <style> 
  2.   .parent { 
  3.     line-height: 100px; /* 通过 line-height 设置幽灵节点的基线 */ 
  4.   } 
  5.   .child { 
  6.     vertical-align: middle; 
  7.     line-height: normal; /* 块级元素时需要加 */ 
  8.     display: inline-block; /* 重点,要把 line-height 设置成 normal, 要不然会继承100 */ 
  9.   } 
  10. </style> 

方式四:display: grid 布局

  1. <style> 
  2.   .parent { 
  3.     display: grid; 
  4.   } 
  5.   .child { 
  6.     margin: auto; 
  7.   } 
  8. </style> 

效果如上

方式五:writing-mode 布局

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

  1. <style> 
  2.   .parent { 
  3.     writing-mode: vertical-lr; 
  4.   } 
  5.   .child { 
  6.     writing-mode: horizontal-tb; 
  7.   } 
  8. </style> 

效果如上

2. 块级元素

参照 水平居中的块级元素布局 ,同样把对水平方向的转换为垂直方向的

2.1 宽高固定

示例代码:

  1. <div class="parent"
  2.   <div class="child"></div> 
  3. </div> 
  4. <style> 
  5.   body { 
  6.     background-color: aqua; 
  7.   } 
  8.   .child { 
  9.     width: 50px; 
  10.     height: 50px; 
  11.     background-color: blueviolet; 
  12.   } 
  13. </style> 

以下几种方式显示效果均为:

方式一:absolute + margin-top

  1. <style> 
  2.   .child { 
  3.     position: absolute
  4.     margin-left: -25px; 
  5.     left: 50%; 
  6.     margin-top: -25px; 
  7.     top: 50%; 
  8.   } 
  9. </style> 

方式二:absolute + calc

  1. <style> 
  2.   .child { 
  3.     position: absolute
  4.     left: calc(50% - 25px); 
  5.     top: calc(50% - 25px); 
  6.   } 
  7. </style> 

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

  1. <style> 
  2.   .child { 
  3.     position: absolute
  4.     left: 0; 
  5.     right: 0; 
  6.     top: 0; 
  7.     bottom: 0; 
  8.     margin: auto; 
  9.   } 
  10. </style> 

2.2 宽高不定

当宽高不定时,以下测试示例:

  1. <div class="parent"
  2.   <div class="child">测试示例</div> 
  3. </div> 
  4. <style> 
  5.   .parent { 
  6.     height: 100px; 
  7.     background-color: aqua; 
  8.   } 
  9.   .child { 
  10.     background-color: blueviolet; 
  11.   } 
  12. </style> 

以下两种方式显示效果均为:

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

需要设定 parent 为相对定位( position: relative )

  1. <style> 
  2.   .parent { 
  3.     position: relative
  4.   } 
  5.   .child { 
  6.     position: absolute
  7.     left: 50%; 
  8.     top: 50px; 
  9.     transform: translate(-50%, -50%); 
  10.   } 
  11. </style> 

方式二:flex 布局

来源:https://github.com/Advanced-Frontend/Daily-Interview-Question

 

责任编辑:武晓燕 来源: 三分钟学前端
相关推荐

2018-09-18 11:20:07

css html5javascript

2010-09-01 10:49:57

CSS水平居中垂直居中

2010-08-24 14:47:48

CSS居中

2010-08-27 10:30:16

CSS垂直居中

2010-08-26 09:27:07

CSS居中

2010-08-24 14:23:39

DIV居中

2010-08-31 14:49:57

CSS居中

2023-03-06 09:20:33

CSS颜色混合

2022-12-20 15:17:29

CSS开发

2010-09-09 10:15:35

DIVCSS

2010-09-09 10:23:23

DIVCSS垂直居中

2021-11-02 07:44:36

CSS 技巧进度条

2010-09-02 13:03:38

CSS垂直居中

2022-06-22 09:06:54

CSS垂直居中代码

2022-07-28 13:01:35

CSS前端元素居中

2010-08-26 11:27:35

CSS居中

2012-06-20 13:46:23

CSS

2010-09-02 13:16:44

CSS水平居中

2024-09-10 21:11:55

2023-12-04 09:31:13

CSS卡片
点赞
收藏

51CTO技术栈公众号