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

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