水平居中的几种方式

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如果为一个值代表上下左右都一样,为40pxmargin：40px 40px如果为两个值代表上下间距为40，左右间距为40margin：40px 50px 40px如果为三个值代表上间距为40，左右间距为50，下边距为40margin：10px 20px 30px 40px如果为四个值代码则依次代表上、右、下、左，分别为10,20,30,40margin与padding相同 所以这里的margin: 0 auto;代表上下为0，左右间距为居中margin:0 auto 在不同场景下的生效条件 块级元素：必须给块级元素指定宽度才可以生效行内元素：必须转化为块级元素设置display：block，并且指定宽度行内块元素：必须转化为块级元素设置display：block，并且指定宽度（如input、button、img等元素，自带宽度可以不用设置其宽度）

如图：

3.使用table居中 body{background: yellowgreen;}p.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;}

并不是所有方法，只是我们日常常用的方法，每种方法都作者亲试。