标签：块元素   指正   文字   items   通过   code   元素   abs   transform   

元素居中显示

• 块级元素居中显示

  • 在body中的某个元素(box1)

    .box1 {
      margin: 0 auto;
    }
    

  • 通过绝对定位在父容器里居中垂直显示

    // 方法一：
    .box1 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    
    // 方法二：(更加简洁)
    .box1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

  • 弹性盒模型（居中）

    // 可以给box1的父级元素设置为flex
    .xxx {
      display: flex;
      justify-content: center;
      align-items: center
    }
    

• 文字实现居中显示

  • 水平居中

    // 给父级块元素设置
    {
    	text-align: center;
    }
    

  • 垂直居中

    // 给父级块元素设置
    {
    	height: 50px;
    	line-height: 50px;
    }
    

有什么遗漏的或者错误的地方，请指正。共同学习、共同进步。

元素居中显示方法总结

标签：块元素   指正   文字   items   通过   code   元素   abs   transform   

原文地址：https://www.cnblogs.com/superwong/p/13958058.html