如何垂直居中一个元素?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

如何垂直居中一个元素?

茶什i 2019-11-18 14:56:04 167

如何垂直居中一个元素?

分享到
取消 提交回答
全部回答(1)
  • 茶什i
    2019-11-18 14:56:14

    方法一:绝对定位居中(原始版之已知元素的高宽)

    .content {
      width: 200px;
      height: 200px;
      background-color: #6699ff;
      position: absolute; /*父元素需要相对定位*/
      top: 50%;
      left: 50%;
      margin-top: -100px; /*设为高度的1/2*/
      margin-left: -100px; /*设为宽度的1/2*/
    }
    
    

    方法二:绝对定位居中(改进版之一未知元素的高宽)

    .content {
      width: 200px;
      height: 200px;
      background-color: #6699ff;
      position: absolute; /*父元素需要相对定位*/
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
    }
    
    

    方法三:绝对定位居中(改进版之二未知元素的高宽)

    .content {
      width: 200px;
      height: 200px;
      background-color: #6699ff;
      margin: auto; /*很关键的一步*/
      position: absolute; /*父元素需要相对定位*/
      left: 0;
      top: 0;
      right: 0;
      bottom: 0; /*让四个定位属性都为0*/
    }
    
    

    方法四:flex 布局居中

    body {
      display: flex; /*设置外层盒子display为flex*/
      align-items: center; /*设置内层盒子的垂直居中*/
      justify-content: center; /*设置内层盒子的水平居中*/
      .content {
        width: 200px;
        height: 200px;
        background-color: #6699ff;
      }
    }
    那么问题来了,如何垂直居中一个 img(用更简便的方法。)
    
    .content {
      //img的容器设置如下
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    
    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

相似问题