CSS中的几种居中方式整理

水平居中

第一种也就是最简单的块元素居中

•    就是给定宽度之后,设置margin : 0 auto;
• 必须得有固定的宽度,如果父盒子有宽度,百分百也可以
• 没有宽度这种办法是没有作用的
• 只有块元素适用这种方法,行内块元素许要先设置display:block;之后并且设置margin:0 auto;才可以用这种方法
• margin : 0(这个值没必要必须是0) auto

第二种方法就是适用与行内块元素的

• 块元素要先设置元素display:inline-block
• 然后给父元素设置text-align:center;
• 宽高可以都不设置

第三种就是运用定位的方法

• 第一步设置父盒子相对定位position:relative;
• 第二步给自己设置绝对定位position:absolute;
• 然后左移50%,left:50%;
• 最后再向左移自身宽度的50%;
  • 可以使用margin:具体单位
  • 最好实用transform:translateX(-50%);
  • 前者要知道盒子的宽度,后者不需要知道盒子的宽度

第四种就是用padding把子盒子往中间挤

• 使用这种方法必须设置父盒子的box-sizing:border-box;只有这样设置padding之后父盒子才不会被撑大
• padding的值就是父盒子的宽度减去子盒子的宽度除以二

垂直居中

第一种是父级高度确定的文本

• 使用行高来把文本内容居中
• 行内块元素都可以使用这种方法
• 给块元素设置display:inline-block;也可以实用该方法

第二种是伸缩布局(兼容性不好)

• 给父盒子设置伸缩布局display:flex;
• 设置主轴对齐方向为居中对齐justify-content:center;
• 垂直也可以实用该方法:再设置垂直对齐方式为居中align-items:center;

最后介绍一种在网上看到的一种神奇的方式

div{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin:auto;
        }

使用这种方式直接就是水平垂直都居中