用N种方法实现各种元素的居中

行内元素

特点：

• 与其他行内元素并排显示。
• 不能设置宽、高，上下边距不生效（上下内边距有显示效果、但不会对周围的元素产生影响）。
• 默认宽度是其中内容的宽度。

以常用的span元素为例：

<div class="father">
  <span class="child">行内元素</span>      
</div>

如果我们想实现如下效果，可以用以下三种方法实现。

方法1

.father{
    height: 200px;
    width: 200px;
    background-color: lightcoral;
    text-align: center;//实现水平居中
}
.child{
    line-height: 200px;//实现垂直居中
}    

方法2

.father{
    height: 200px;
    width: 200px;
    background-color: lightcoral;
    text-align: center;//实现水平居中
    display: table; 实现垂直居中
}
.child{
   display: table-cell;实现垂直居中
   vertical-align: middle;实现垂直居中
}    

法三：弹性布局 —— 行内元素、img元素、块级元素都适用

img属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。

HTML:

<div class="father">
  <span class="child">行内元素</span>      
</div>

<div class="father">
  <img class="child" src="../../images/1.jpg">
</div>

<div class="father">
  <div class="child">块级元素div</div>
</div>
CSS:
.father{
    height: 200px;
    width: 200px;
    background-color: lightcoral;
	display: flex;//弹性布局
    justify-content: center;//实现水平居中
    align-items: center;//实现垂直居中
}

效果如下三图

12
3

块级元素

特点：

• 独占一行，不能与其他元素并排。
• 能设置宽度、高度、内外边距。
• 默认宽度为100%，，即撑满父容器。

水平居中

块级元素默认宽度为100%。也就是说，只有设置了宽度的块级元素才能设置水平居中。

 <div class="father">
     <div class="child">块级元素div</div>
 </div>

方法1：margin:auto

.father{
    height: 250px;
    width: 250px;
    background-color: lightcoral;
}
.child{
    width: 180px;
    height: 180px;
    background-color: lightskyblue;
	//*********写法一：***********
    // margin: auto;
   	//**********写法二：**********
    // margin: 0 auto;
   	//**********写法三：**********
    margin-left: auto;
    margin-right: auto;
}

方法2：这个方法需要设置 margin-left=居中元素的width乘负二分之一

.father{
    height: 250px;
    width: 250px;
    background-color: lightcoral;
}
.child{
    width: 180px;
    height: 180px;
    background-color: lightskyblue;
    position: relative;//元素相对定位
	left: 50%;//向右移动父元素宽度的50%
    margin-left: -90px;//向左移自身宽度的一半
}

下面几种方法适用于要居中的元素绝对定位时的情况。

方法3、4和方法2的套路是一样的

.father{
    height: 250px;
    width: 250px;
    background-color: lightcoral;
    position: relative;//父元素相对定位
}
.child{
    width: 180px;
    height: 180px;
    background-color: lightskyblue;
    	
   //******* 方法3：******
    position: absolute;//子元素绝对定位 脱离标准流
	left: 50%;// 子元素相对父相对定位元素向右移动父元素宽度的50%
    margin-left: -90px;

	//******方法4：*******
	position: absolute;//子元素绝对定位 脱离标准流
	left: 50%;// 子元素相对父相对定位元素向右移动父元素宽度的50%
	//写法一：
	transform: translate(-50%,0);//
	//写法二：
	transform: translateX(-50%);//
	
	//******方法5：*******
	position: absolute;//
    right: 0;//
    left: 0;//
    margin: auto;//
}

---

垂直居中

方法1：套路参考水平居中的方法2

.father{
    height: 250px;
    width: 250px;
    background-color: lightcoral;
}
.child{
    width: 180px;
    height: 180px;
    background-color: lightskyblue;
    position: relative;//元素相对定位
	top: 50%;//向下移动父元素高度的50%
    margin-top: -90px;//向上移自身高度的一半
}

方法2、3跟水平居中的方法3方法4差不多的意思，不过是换成了垂直方向。

.father{
    height: 250px;
    width: 250px;
    background-color: lightcoral;
    position: relative;//依然是父元素相对定位
}
.child{
    width: 180px;
    height: 180px;
    background-color: lightskyblue;

	//*******法2：******
	//这个方法需要margin-top:（-1/2） * 居中元素的height
	position: absolute;//
	top :50%;//
	margin-top:-90px;
	
	//********法3：********
	//一样的套路
	position: absolute;//
	top :50%;//
	//写法一：
    transform: translate(0,-50%);
    //写法二：
    transform: translateY(-50%);

	//*******法4：********跟水平居中的方法5一个套路
	position: absolute;//
    top: 0;//
    bottom: 0;//
    margin: auto;//
}

水平垂直方向都居中

还是套路。。。

.father{
    height: 250px;
    width: 250px;
    background-color: lightcoral;
    position: relative;//==
}
.child{
    width: 180px;
    height: 180px;
    background-color: lightskyblue;
    //**************法1：***************
	position: absolute;//
    top: 50%;//
	left:50%;//
	margin-top:-90px;//
	margin-left:-90px;//
	
    //**************法2：***************
	position: absolute;//
    top:  50%;//
	left: 50%;//
    transform: translate(-50%,-50%);//

    //**************法3：***************
	position: absolute;//
    top:  0;//
    bottom:0;//
	left: 0;//
	right:0;//
	margin:auto;
	
   //**************法4：***************
	position: absolute;//
    left: calc(50% - 90px);//
    top: calc(50% - 90px);//
}

法5：

.father{
    height: 250px;
    width: 250px;
    background-color: lightcoral;
}
.child{
    width: 180px;
    height: 180px;
    background-color: lightskyblue;
    position: relative;//
    margin: auto;//
    top: 50%;//
	margin-top:-90px;
}