devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS实现垂直居中的十五种方法_css 文字垂直居中

作者：我家小花儿 | 2024-06-11 10:23:12

赞

踩

css 文字垂直居中

情景一：单行文字垂直居中

 

1、line-height

    原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置

  1. <div class="text-con">单行文字垂直居中</div>
  2.  
  3.  
  4.  
  5. <style>
  6.  
  7. .text-con {
  8.  
  9.     width: 200px;
  10.  
  11.     height:  60px;
  12.  
  13.     line-height: 60px;
  14.  
  15.     color: #fff;
  16.  
  17.     background: #000;
  18.  
  19.     text-align: center;
  20.  
  21. }
  22.  
  23. </style>

 

情景二：多行文字垂直居中

1、absolute + margin负值

    定位设置top：50%来抓取空间高度的50%，然后将居中元素的margin-top设置为负一半的高度

  1. <h3>absolute + margin负值</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         absolute + margin负值多行文本垂直居中
  8.  
  9.         <a>absolute + margin负值多行文本垂直居中</a>
  10.  
  11.         absolute + margin负值多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     position: relative;
  30.  
  31. }
  32.  
  33. .content {
  34.  
  35.     width: 400px;
  36.  
  37.     background: #ccc;
  38.  
  39.     height: 70px;
  40.  
  41.     position: absolute;
  42.  
  43.     top: 50%;
  44.  
  45.     left: 50%;
  46.  
  47.     margin-left: -200px;
  48.  
  49.     margin-top: -35px;
  50.  
  51. }
  52.  
  53. </style>

 

2、absolute + margin auto

    当元素设置为绝对定位后，假设它是抓取不到整体可运用的空间范围，所以margin:auto会失效，但是当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这是你的margin:auto;就生效了。此方法的缺点是定位元素必须有固定的宽高（百分比也可）才能正常居中

  1. <h3>absolute + margin auto</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         absolute + margin auto 多行文本垂直居中
  8.  
  9.         <a>absolute + margin auto 多行文本垂直居中</a>
  10.  
  11.         absolute + margin auto 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     position: relative;
  30.  
  31. }
  32.  
  33. .content {
  34.  
  35.     width: 400px;
  36.  
  37.     height: 70px;
  38.  
  39.     background: #ccc;
  40.  
  41.     position: absolute;
  42.  
  43.     top: 0;
  44.  
  45.     right: 0;
  46.  
  47.     bottom: 0;
  48.  
  49.     left: 0;
  50.  
  51.     margin: auto;
  52.  
  53. }
  54.  
  55. </style>

 

3、absolute + translate

    此居中的定位元素不需要固定的宽高，我们利用绝对定位的top和left设置元素跟上方和左方各为50%，再利用translate(-50%, -50%)位移居中元素自身的宽和高的50%来达到居中；不设置宽高时会自动充满

  1. <h3>absolute + translate</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         absolute + translate 多行文本垂直居中
  8.  
  9.         <a>absolute + translate 多行文本垂直居中</a>
  10.  
  11.         absolute + translate 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     position: relative;
  30.  
  31. }
  32.  
  33. .content {
  34.  
  35.     background: #ccc;
  36.  
  37.     position: absolute;
  38.  
  39.     top: 50%;
  40.  
  41.     left: 50%;
  42.  
  43.     transform: translate(-50%, -50%);
  44.  
  45. }
  46.  
  47. </style>
  48.

 

4、flex + align-items

    只要设定父层display:flex以及设定次轴属性align-items:center就好了，有点事不需要设置高度就可以自动居中，代码简单

    

  1. <h3>flex + align-items</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         flex + align-items 多行文本垂直居中
  8.  
  9.         <a>flex + align-items 多行文本垂直居中</a>
  10.  
  11.         flex + align-items 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: flex;
  30.  
  31.     justify-content: center;
  32.  
  33.     align-items: center;
  34.  
  35. }
  36.  
  37. .content {
  38.  
  39.     width: 400px;
  40.  
  41.     background: #ccc;
  42.  
  43. }
  44.  
  45. </style>

 

5、flex + auto

    父层元素设置display:flex，里层元素设置margin:auto就可实现垂直居中

  1. <h3>flex + margin:auto</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         flex + margin:auto 多行文本垂直居中
  8.  
  9.         <a>flex + margin:auto 多行文本垂直居中</a>
  10.  
  11.         flex + margin:auto 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: flex;
  30.  
  31. }
  32.  
  33. .content {
  34.  
  35.     width: 400px;
  36.  
  37.     background: #ccc;
  38.  
  39.     margin: auto;
  40.  
  41. }
  42.  
  43. </style>

 

6、grid + template

    把模板设置成三列，就能搞定垂直居中了

  1. <h3>grid + template</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         grid + template 多行文本垂直居中
  8.  
  9.         <a>grid + template 多行文本垂直居中</a>
  10.  
  11.         grid + template 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: grid;
  30.  
  31.     grid-template-rows: 1fr auto 1fr;
  32.  
  33.     grid-template-columns: 1fr auto 1fr;
  34.  
  35.     grid-template-areas:
  36.  
  37.     '. . .'
  38.  
  39.     '. amos .'
  40.  
  41.     '. . .';
  42.  
  43. }
  44.  
  45. .content {
  46.  
  47.     width: 400px;
  48.  
  49.     background: #ccc;
  50.  
  51.     grid-area: amos;
  52.  
  53. }
  54.  
  55. </style>

 

7、grid + align-items

    在flex中align-items是针对次轴cross axis作对齐，而grid中是针对Y轴作对齐，可以把它想象成表格中存储单元的vertical-align属性来看

  1. <h3>grid + align-items</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         grid + align-items 多行文本垂直居中
  8.  
  9.         <a>grid + align-items 多行文本垂直居中</a>
  10.  
  11.         grid + align-items 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: grid;
  30.  
  31.     justify-content: center;
  32.  
  33.     align-items: center;
  34.  
  35. }
  36.  
  37. .content {
  38.  
  39.     width: 400px;
  40.  
  41.     background: #ccc;
  42.  
  43. }
  44.  
  45. </style>

 

8、grid + align-content

    grid中的align-content与flex中的有些差异，在flex中仅能针对多行元素起作用，但在grid中没有这个问题，可以用作对子元素做垂直居中

  1. <h3>grid + align-content</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         grid + align-content 多行文本垂直居中
  8.  
  9.         <a>grid + align-content 多行文本垂直居中</a>
  10.  
  11.         grid + align-content 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: grid;
  30.  
  31.     justify-content: center;
  32.  
  33.     align-content: center;
  34.  
  35. }
  36.  
  37. .content {
  38.  
  39.     width: 400px;
  40.  
  41.     background: #ccc;
  42.  
  43. }
  44.  
  45. </style>

 

9、grid + align-self

    align-self是对grid Y轴的个别对齐方式，只要对单一子元素设置为align-self: center就能达到垂直居中

  1. <h3>grid + align-self</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         grid + align-self 多行文本垂直居中
  8.  
  9.         <a>grid + align-self 多行文本垂直居中</a>
  10.  
  11.         grid + align-self 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: grid;
  30.  
  31.     justify-content: center;
  32.  
  33. }
  34.  
  35. .content {
  36.  
  37.     width: 400px;
  38.  
  39.     background: #ccc;
  40.  
  41.     align-self: center;
  42.  
  43. }
  44.  
  45. </style>

 

10、grid + place-items

    place-items是align-items与justify-items的缩写，简单说就是水平和居中的对齐方式

  1. <h3>grid + place-items</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         grid + place-items 多行文本垂直居中
  8.  
  9.         <a>grid + place-items 多行文本垂直居中</a>
  10.  
  11.         grid + place-items 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: grid;
  30.  
  31.     place-items: center;
  32.  
  33. }
  34.  
  35. .content {
  36.  
  37.     width: 400px;
  38.  
  39.     background: #ccc;
  40.  
  41.     align-self: center;
  42.  
  43. }
  44.  
  45. </style>

 

11、grid + place-content

    place-content是align-content与juestify-content的缩写

  1. <h3>grid + place-content</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         grid + place-content 多行文本垂直居中
  8.  
  9.         <a>grid + place-content 多行文本垂直居中</a>
  10.  
  11.         grid + place-content 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: grid;
  30.  
  31.     place-content: center;
  32.  
  33. }
  34.  
  35. .content {
  36.  
  37.     width: 400px;
  38.  
  39.     background: #ccc;
  40.  
  41.     align-self: center;
  42.  
  43. }
  44.  
  45. </style>

 

12、grid + margin

    由于grid元素对空间解读的特殊性，只要在父层元素设定display: grid，在需要垂直居中的元素上设置margin: auto即可自动居中，这点与flex+margin类似

  1. <h3>grid + margin</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         grid + margin 多行文本垂直居中
  8.  
  9.         <a>grid + margin 多行文本垂直居中</a>
  10.  
  11.         grid + margin 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: grid;
  30.  
  31. }
  32.  
  33. .content {
  34.  
  35.     width: 400px;
  36.  
  37.     background: #ccc;
  38.  
  39.     margin: auto;
  40.  
  41. }
  42.  
  43. </style>
  44.

13、display: table-cell

    原理在于使用css的display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来实现垂直居中。（不建议使用，自认为table是个不好控制的东东，看效果图就知道这种方式并不适合多行文本，emmm）

  1. <h3>display: table-cell</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         display: table-cell 多行文本垂直居中
  8.  
  9.         <a>display: table-cell 多行文本垂直居中</a>
  10.  
  11.         display: table-cell 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29.     display: table-cell;
  30.  
  31.     text-align: center;
  32.  
  33.     vertical-align: middle;
  34.  
  35. }
  36.  
  37. .content {
  38.  
  39.     width: 400px;
  40.  
  41.     background: #ccc;
  42.  
  43.     margin: auto;
  44.  
  45. }
  46.  
  47. </style>

 

14、calc

    calc是计算机英文单词calculator的缩写，利用calc()方法可以将百分比及时且动态的计算出实际需要什么高度，但是大量使用会影响网页性能

  1. <h3>calc</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         calc 多行文本垂直居中
  8.  
  9.         <a>calc 多行文本垂直居中</a>
  10.  
  11.         calc 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29. }
  30.  
  31. .content {
  32.  
  33.     width: 400px;
  34.  
  35.     background: #ccc;
  36.  
  37.     position: relative;
  38.  
  39.     top: calc((100% - 70px) / 2);
  40.  
  41.     margin: auto;
  42.  
  43. }
  44.  
  45. </style>

 

15、relative + translateY

    这个方法是利用了top: 50%，让元素上放产生固定百分比的距离，接着让要居中的元素本身使用translateY的百分比来达成垂直居中的需求，犹豫translate的百分比单位是利用元素自身的尺寸作为100%，这样让我们要利用元素自身宽高做事变得很方便

  1. <h3>relative + translateY</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         relative + translateY 多行文本垂直居中
  8.  
  9.         <a>relative + translateY 多行文本垂直居中</a>
  10.  
  11.         relative + translateY 多行文本垂直居中
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     height: 200px;
  26.  
  27.     border: 1px #000 solid;
  28.  
  29. }
  30.  
  31. .content {
  32.  
  33.     width: 400px;
  34.  
  35.     background: #ccc;
  36.  
  37.     position: relative;
  38.  
  39.     top: 50%;
  40.  
  41.     transform: translateY(-50%);
  42.  
  43.     margin: auto;
  44.  
  45. }
  46.  
  47. </style>

 

情景三：多对象的垂直居中

 

1、line-height + inline-block

    将多个元素或多行元素当成一个来看待，所以要讲这些数据多包一层，并将其设定为inline-block，并在该inline-block对象的外层对象使用line-height来代替height的设置，

  1. <h3>line-height + inline-block</h3>
  2.  
  3. <div class="box">
  4.  
  5.     <div class="content">
  6.  
  7.         <div>这是第一个元素</div>
  8.  
  9.         <p>这是第二个元素</p>
  10.  
  11.         <a>这是第三个元素</a>
  12.  
  13.     </div>
  14.  
  15. </div>
  16.  
  17.  
  18.  
  19. <style>
  20.  
  21. .box {
  22.  
  23.     width: 500px;
  24.  
  25.     border: 1px #000 solid;
  26.  
  27.     line-height: 200px;
  28.  
  29.     text-align: center;
  30.  
  31. }
  32.  
  33. .content {
  34.  
  35.     width: 400px;
  36.  
  37.     background: #ccc;
  38.  
  39.     display: inline-block;
  40.  
  41.     height: auto;
  42.  
  43.     line-height: 1;
  44.  
  45. }
  46.  
  47. </style>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/702786
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号