水平居中的几种方式
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;
}
