代码改变世界
[登录 · 注册]
  • CSS垂直居中的方法
  • 一、文本的垂直居中

    1. 父元素没有 height

    直接对元素设置 padding: 10px 0; 就可以让它垂直居中。

    如果要水平垂直居中,那么对文本内容的父元素添加一个 text-align: center; 就行。

    2. 父元素有 height

    line-height + height

    二、块元素的垂直居中

    1. 父元素没有 height

    父元素设置,padding: 10px 0; 实现垂直居中

    子元素设置,margin: 0 auto; 实现水平居中

    2. 父元素有 height

    (1) display: table-cell + vertical-align: middle (原理:变成 table 单元格)

    (2) 子绝父相 + top/left50% + margin-top/margin-left 负的宽高的一半



    (3) 子绝父相 + top/left50% + transform: translateX(-50%) translateY(-50%);

    (4) 子绝父相 + trbl0 + margin: auto;

    (5) flex 弹性盒子

    父元素设置,display: flex; justify-content: center; align-items: center;

    三、总结

    水平垂直居中的方法有很多,推荐 flex 弹性盒子和 transform,减少重排。

  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/buildnewhomeland/p/13582348.html
走看看 - 开发者的网上家园