使元素居中的五种方式

我们在写html文档时，经常需要将元素居中。而我们常用的居中方式有以下几种：

一、使用定位+移动

首先我们将父元素设置为相对定位 position：relative；然后再将子元素设置为绝对定位，然后设置top和left值，这时我们会发现这只是将子元素的左上角居中了，然后我们可以通过transform: translate(-50%,-50%);将子元素的中心设置为居中。

代码如下：

.child{
 	height: 100px;
	position: absolute;//父元素相对定位
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

二、使用定位并调整magin值去执行

这个方法与上一个方法差不多，但是它靠使用外边距的方式去强行挤上去，而magin值取子元素边长的一半

.child{
	width: 100px;
	height: 100px;
	position: absolute;
	top:50%;
	left:50%;
	margin-top: -50px;
	margin-left: -50px;
}

三、使用magin：auto去令子元素自动居中

这种方法一样是在定位中使用的。当我们将定位的偏移量都设为0之后并将magin设为auto，由于magin的权重都一样，因此系统会将子元素的所有外边距平均分配使得子元素居中。

代码如下：

child {
	width: 100px;
    height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}

四、利用弹性盒子进行操作

这种方式是通过将父元素设置成弹性盒子从而实现的，我们可以将父元素设置成弹性盒子，然后就可以通过设置主轴居中和副轴居中来进行设置。

father{
		 width: 200px;
         height: 200px;
         display: flex;
         justify-content: center;
         align-items: center;
}

五、利用单元格形式来居中图片

利用display：table-cell来将父元素设置成单元格的形式，然后我们就可以使用

 vertical-align: middle;和 text-align: center;语句来将父元素里的子元素居中了。

.father{
		width: 500px;
         height: 500px;
         border: 1px solid red;
         /* 将元素转成表格单元格显示 */
         display: table-cell;
         vertical-align: middle;
         text-align: center;
}

.child{
        display: inline-block;
        vertical-align: middle;
        /* 消除行内块元素三像素问题 */
}