CSS垂直居中的10个方法

清疚 2022-10-10 09:59 143阅读 0赞

## 前言 ##

前端开发中元素居中是最常见和最经常使用到的css技巧，不仅开发中经常会用到，面试官出题考核基础时有时候也会问道这类问题。本文主要介绍10种垂直居中的方法。希望对你我都有帮组。

## 1、line-height+height实现 ##

如果子元素是行内文本元素的话，只要设置父元素的height和line-height高度一样就可以垂直居中。

HTML

<table> 
 <tbody> 
  <tr> 
   <td> <p></p> 
    <div> 
     <code><code>"parent"</code><code>&gt;</code> </code> 
     <p><code><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code><code>"child"</code><code>&gt;我是行内元素&lt;</code><code>/span</code><code>&gt;</code></code></code></p> 
     <code> </code> 
     <p><code><code>&lt;</code><code>/div</code><code>&gt;</code></code></p> 
     <code> </code> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

CSS

效果图：

![20210627184242498.png][]

## 2、flex+align-items实现 ##

flex布局可以实现一行或多行元素垂直居中，使用`align-items：center`就可以。

HTML

CSS

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>.parent { </code></p> <p><code>&nbsp;&nbsp;</code><code>height: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>display: flex;</code></p> <p><code>&nbsp;&nbsp;</code><code>align-items: center;</code></p> <p><code>&nbsp;&nbsp;</code><code>background:&nbsp; </code><code>#fcc;</code></p> <p><code>}</code></p> <p><code>.child { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#f66;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 180px;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

效果图：

![20210627184302700.png][]

## 3、table-cell+vertical-align实现 ##

利用表布局的`vertical-align: middle`属性可以实现子元素的垂直居中。

HTML

CSS

效果图：

![2021062718432055.png][]

## 4、absolute+负margin(已知高度宽度) ##

通过绝对定位元素距离顶部`50%`，并设置`margin-top`向上偏移元素高度的一半，就可以实现居中。

HTML

CSS

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>.parent { </code></p> <p><code>&nbsp;&nbsp;</code><code>height: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: relative;</code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#fcc;</code></p> <p><code>}</code></p> <p><code>.child { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#f66;</code></p> <p><code>&nbsp;&nbsp;</code><code>height: 50px;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: absolute;</code></p> <p><code>&nbsp;&nbsp;</code><code>top</code><code>: 50%;</code></p> <p><code>&nbsp;&nbsp;</code><code>margin-</code><code>top</code><code>: -25px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 180px;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

效果图：

![20210627184335999.png][]

## 5、absolute+transform(已知高度宽度) ##

当垂直居中的元素的高度和宽度未知时，可以借助`CSS3`中的`transform`属性向`Y`轴反向偏移`50%`的方法实现垂直居中。但存在兼容性问题。

HTML

CSS

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>.parent { </code></p> <p><code>&nbsp;&nbsp;</code><code>height: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: relative;</code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#fcc;</code></p> <p><code>}</code></p> <p><code>.child { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#f66;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: absolute;</code></p> <p><code>&nbsp;&nbsp;</code><code>top</code><code>: 50%;</code></p> <p><code>&nbsp;&nbsp;</code><code>transform: translateY(-50%);</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 180px;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

效果图：

![20210627184351780.png][]

## 6、absolute + calc实现 ##

这种方式也要求居中元素的宽高必须固定，使用css3的ca’lc计算属性，top的百分比是基于元素的左上角，那么用top百分比在减去宽度的一半就可以垂直居中。

HTML

CSS

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>.parent { </code></p> <p><code>&nbsp;&nbsp;</code><code>height: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: relative;</code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#fcc;</code></p> <p><code>}</code></p> <p><code>.child { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#f66;</code></p> <p><code>&nbsp;&nbsp;</code><code>height: 50px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 180px;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: absolute;</code></p> <p><code>&nbsp;&nbsp;</code><code>top</code><code>: calc(50% - 25px);</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 180px;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

效果图：

![20210627184416987.png][]

## 7、absolute+margin: auto实现 ##

通过绝对定位，然后设置`top：0`、`bottom：0`、`margin：auto`实现居中。

HTML

CSS

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>.parent { </code></p> <p><code>&nbsp;&nbsp;</code><code>height: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: relative;</code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#fcc;</code></p> <p><code>}</code></p> <p><code>.child { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#f66;</code></p> <p><code>&nbsp;&nbsp;</code><code>height: 50px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 180px;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: absolute;</code></p> <p><code>&nbsp;&nbsp;</code><code>top</code><code>: 0;</code></p> <p><code>&nbsp;&nbsp;</code><code>margin: auto;</code></p> <p><code>&nbsp;&nbsp;</code><code>bottom: 0;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

效果图：

![20210627184427547.png][]

## 8、padding实现 ##

通过设置父元素`padding`来实现。

HTML

CSS

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>.parent { </code></p> <p><code>&nbsp;&nbsp;</code><code>width: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>padding: 80px 0;</code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#fcc;</code></p> <p><code>}</code></p> <p><code>.child { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#f66;</code></p> <p><code>&nbsp;&nbsp;</code><code>height: 80px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 180px;</code></p> <p><code>&nbsp;&nbsp;</code><code>line-height: 80px;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

效果图：

![20210627184440956.png][]

## 9、flex+flex-direction实现 ##

这种方式也是首先给父元素设置 `display:flex` ，然后改变主轴的方向 `flex-direction: column`，最后通过`justify-content：center`实现垂直居中。

HTML

CSS

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>.parent { </code></p> <p><code>&nbsp;&nbsp;</code><code>width: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>height: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>display: flex;</code></p> <p><code>&nbsp;&nbsp;</code><code>flex-direction: column;</code></p> <p><code>&nbsp;&nbsp;</code><code>justify-content: center;</code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#fcc;</code></p> <p><code>}</code></p> <p><code>.child { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#f66;</code></p> <p><code>&nbsp;&nbsp;</code><code>height: 80px;</code></p> <p><code>&nbsp;&nbsp;</code><code>width: 180px;</code></p> <p><code>&nbsp;&nbsp;</code><code>line-height: 80px;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

效果图：

![20210627184458352.png][]

## 10、Grid实现 ##

HTML

<table> 
 <tbody> 
  <tr> 
   <td> <p></p> 
    <div> 
     <code><code>"parent"</code><code>&gt;</code> </code> 
     <p><code><code>&nbsp;&nbsp;&nbsp;&nbsp;</code></code></p> 
     <div> 
      <code><code><code>"child1"</code><code>&gt;&lt;</code><code>/div</code><code>&gt;</code> </code></code> 
      <p><code><code><code>&nbsp;&nbsp;&nbsp;&nbsp;</code></code></code></p> 
      <div> 
       <code><code><code><code>"child"</code><code>&gt;Grid实现&lt;</code><code>/div</code><code>&gt;</code> </code></code></code> 
       <p><code><code><code><code>&nbsp;&nbsp;&nbsp;&nbsp;</code></code></code></code></p> 
       <div> 
        <code><code><code><code><code>"child1"</code><code>&gt;&lt;</code><code>/div</code><code>&gt;</code> </code></code></code></code> 
        <p><code><code><code><code><code>&lt;</code><code>/div</code><code>&gt;</code></code></code></code></code></p> 
        <code><code><code><code> </code></code></code></code> 
       </div> 
      </div> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

CSS

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>.parent { </code></p> <p><code>&nbsp;&nbsp;</code><code>width: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>height: 200px;</code></p> <p><code>&nbsp;&nbsp;</code><code>display: grid;</code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#fcc;</code></p> <p><code>}</code></p> <p><code>.child { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#f66;</code></p> <p><code>}</code></p> <p><code>.child1 { </code></p> <p><code>&nbsp;&nbsp;</code><code>background: </code><code>#fcc;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

效果图：

![20210627184510699.png][]

喜欢我的文章就关注我吧，持续更新中.....  
以上内容希望帮助到大家，很多朋友在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以去主页或者评论留言[点击进入暗号：csdn][csdn]

[20210627184242498.png]: /images/20221005/3dddd78fe9954309aa405a3b4acec23a.png
[20210627184302700.png]: /images/20221005/d706d46e31f94ad783f4e99a6562e0be.png
[2021062718432055.png]: /images/20221005/8b6e29bcd0284017af665449664986c7.png
[20210627184335999.png]: /images/20221005/4eee749cc086462bb733ce9ab5a758d5.png
[20210627184351780.png]: /images/20221005/56c4209eb18846a4b48b3a62e3c42079.png
[20210627184416987.png]: /images/20221005/779c5d1422db481c9aea7c746dc122b9.png
[20210627184427547.png]: /images/20221005/e47ec03643f647f1b1ee444a222c57da.png
[20210627184440956.png]: /images/20221005/fd05c1a8a4554b8cb3e9ebfe8c4304bd.png
[20210627184458352.png]: /images/20221005/9944a41655ad4ff7a1025331bb2262e1.png
[20210627184510699.png]: /images/20221005/2f855bed59344f0496508236680af5d6.png
[csdn]: https://jq.qq.com/?_wv=1027&k=nKNuXAFr