CSS元素居中的几种常用方法

<div class="box">
	<div class="box1"></div>	
</div>

1、定位+margin：auto；

优点：兼容性较好

缺点：不支持IE7以下的浏览器

.box{
	position:relative;
}
.box1{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}

2、定位+margin-left+margin-top

优点：兼容性好

缺点：必须知道子元素的宽高

.box{
	position:relative;
}
.box1{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-元素宽；
	margin-top:-元素高；
}

3、定位+transform

这是css3样式，兼容性较差，只支持IE9+的浏览器

.box｛
	position:relative;
	｝
.box1{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

4、弹性盒子

移动端首选

.box{
	display:flex;
	justify-content:center;
	align-items:center;
}
.box1{
	width:100px;
	height:100px;
}

拓展知识

让一个行内块元素在父元素中上下左右居中的方法，实现过程颇为繁琐，只做了解即可

	.box{
            width: 600px;
            height: 400px;
            background-color: blueviolet;
        }
    .box1{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            *确保子元素是行内块元素*
            display: inline-block;
        }
	<div class="box">
        <div class="box1"></div>
    </div>

实现流程

1：左右居中

.box{		*给父元素添加*
            text-align: center;
        }

2：上下居中
a：必须保证 标尺 inline-block 标尺和子元素在同一行

<div class="box">
        <div class="box1"></div><span></span>
    </div>

b：给“标尺”确定中线 添加属性 vertical-align：middle；
注意：vertical-align属性按照 顶线 中线 基线 底线 来对齐

span{
            width: 2px;
            height: 100%;
            background-color: chartreuse;
            vertical-align: middle;
        }

c：给子元素添加属性 vertical-align：middle；

.box1{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            vertical-align: middle;
        }

c：给“标尺”设置width：0；height：100%；隐藏标尺