CSS居中方式大全
水平居中的几种方式
1.使用inline-block 和 text-align实现 复制代码
.content{ width: 900px; height: 500px; background: pink; text-align: center; //这里的text-align：center子元素会继承该属性 //我们的目的是将元素居中而不是文本居中 } .item{ width: 300px; background: gold; display: inline-block; } 复制代码优点:兼容性好 缺点:需要同时设置子元素和父元素，并且文本居中会继承 复制代码
如图：
2.使用margin：0 auto 复制代码
body{ background: yellowgreen; } .content{ width: 500px; height: 500px; margin: 0 auto; background: gold; } 复制代码优点:兼容性好 缺点:需要指定宽度 margin属性值可以为一个、两个、三个、四个、 margin：40px 如果为一个值代表上下左右都一样,为40px margin：40px 40px 如果为两个值代表上下间距为40，左右间距为40 margin：40px 50px 40px 如果为三个值代表上间距为40，左右间距为50，下边距为40 margin：10px 20px 30px 40px 如果为四个值代码则依次代表上、右、下、左，分别为10,20,30,40 margin与padding相同 所以这里的margin: 0 auto;代表上下为0，左右间距为居中 margin:0 auto 在不同场景下的生效条件 块级元素：必须给块级元素指定宽度才可以生效 行内元素：必须转化为块级元素设置display：block，并且指定宽度 行内块元素：必须转化为块级元素设置display：block，并且指定宽度（如input、button、img等元素，自带宽度可以不用设置其宽度） 复制代码
如图：
3.使用table居中 复制代码
body{ background: yellowgreen; } div.content{ width: 500px; display: table; margin: 0 auto; background: gold; } 复制代码优点:只需要对自身进行调整 缺点:IE6,7需要调整结构 复制代码
如图二
4.使用绝对定位居中 复制代码
.content{ width: 500px; height: 500px; background: gold; position: relative; } .item{ width: 300px; position: absolute; left: 50%; background: yellowgreen; transform: translateX(-50%); } 复制代码优势：无需设置容器宽度，在移动端可以使用 劣势：兼容性差，需要IE9及以上浏览器的支持 复制代码
如图: 5.使用flex布局来实现
.content{ width: 500px; height: 500px; background:pink; display: flex; justify-content: center; } .item{ width: 300px; height: 300px; background: gold; } 复制代码优势：实现起来简单，尤其是使用在响应式布局中 劣势：兼容性差，如果大面积的使用该布局可能会影响效率 复制代码
如图:
垂直居中的几种方式
这里就和水平居中类似了
1.使用display：table-cell来实现
.content{ width: 500px; height: 500px; background: gold; display: table-cell; vertical-align: middle; } .item{ background: yellowgreen; } 复制代码如图：
2.使用display：inline-block来实现 只有一个元素属于inline或是inline-block，它的vertical-align属性才会起作用。在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，需要设置line-height或设置display:table-cell;
我这里申明一点这个第二种方式，大家网上查阅的大都是错误示例，根本不可能实现，正确代码如下
.content { width: 300px; height: 300px; line-height: 300px; background: gold; } .item { width: 50%; height: 50%; background: yellowgreen; display: inline-block; vertical-align: middle; } 复制代码如图：
3.使用绝对定位absolute来实现（同水平居中的使用方法）
.content{ width: 500px; height: 500px; background: gold; position: relative; } .item{ width: 300px; height: 300px; position: absolute; top: 50%; background: yellowgreen; transform: translateY(-50%); } 复制代码4.使用flex来实现
.content{ width: 500px; height: 500px; background:pink; display: flex; align-items: center; } .item{ width: 300px; height: 300px; background: gold; } 复制代码垂直水平居中的几种方式
1.使用绝对定位absolute来实现 已知宽高情况，利用margin:auto
.content{ width: 500px; height: 500px; background:pink; position: relative; } .item{ width: 300px; height: 300px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: yellowgreen; } 复制代码如图：
未知宽高情况
.content{ width: 500px; height: 500px; background:pink; position: relative; } .item{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: yellowgreen } 复制代码如图： 2.使用flex布局来实现
.content{ width: 500px; height: 500px; background:pink; display: flex; justify-content: center; align-items: center; } .item{ width: 300px; height: 300px; background: gold; } 复制代码3.使用inline-block 和 text-align以及vertical-align实现
.content { width: 300px; height: 300px; line-height: 300px; background: gold; text-align: center; } .item { width: 50%; height: 50%; background: yellowgreen; display: inline-block; vertical-align: middle; } 复制代码4.使用display：table-cell+display: inline-block来实现
.content{ width: 500px; height: 500px; background: gold; display: table-cell; text-align: center; vertical-align: middle; } .item{ width: 200px; height: 200px; display: inline-block; background: yellowgreen; } 复制代码并不是所有方法，只是我们日常常用的方法，每种方法都作者亲试。
作者：勿忘初心y
链接：https://juejin.cn/post/7036925471556108324