元素居中显示

• 块级元素居中显示

  • 在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; } 

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