开发者社区> 问答> 正文

如何垂直居中一个元素?

如何垂直居中一个元素?

展开
收起
茶什i 2019-11-18 14:56:04 1186 0
1 条回答
写回答
取消 提交回答
  • 方法一:绝对定位居中(原始版之已知元素的高宽)

    .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;
    }
    
    2019-11-18 14:56:14
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载