CSS样式--实现img标签在块级标签中居中效果

总结：
方案一：使用display:table-cell;垂直居中
方案二：使用定位
（1）方法一：元素定位居中（上下左右均为0）
（2）方法二：元素定位居中（拉伸法）
（3）方法三：使用translate（X,Y）函数
方案三：使用 flex 布局

HTML结构：

CSS样式：

方案一 ：使用display：table-cell

设置display:table-cell垂直居中，但是会使元素外边距设置失效。

div{
	width:500px;
	height:100px;
	border:1px solid red;
	text-align:center;	水平居中
	display:table-cell;	此元素会作为一个表格单元格显示
	vertical-align:middle;垂直居中
	} 

方案二：使用定位属性

方法一：元素定位居中（上下左右均为0）
			宽度可以与父级一致，但必须已知高度。
div{
	width:500px;
	height:100px;
	border:1px solid red;
	margin:100px auto;
	position:relative;
}
div img{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
} 

方法二：使用元素定位居中（拉伸法）：
需要已知图片本身大小
div{
	width:500px;
	height:100px;
	border:1px solid red;
	margin:100px auto;
	position:relative;
}
div img{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-25px;
	margin-left:-214px;
} 

方法三：使用translate（X,Y）函数

与方法三margin-top（left）拉伸法不同的是，translate可以在不知道宽高的情况下进行居中。translate（）函数中的百分比是相对于自身宽高的百分比。

 div{
 		width:500px;
 		height:100px;
 		border:1px solid red;
 		margin:100px auto;
 		position:relative;
 }
 div img{
    	position:absolute;
    	top:50%;
    	left:50%;
    	transform:translate(-50%,-50%);作用：往上（x轴）,左（y轴）移动自身长宽的50%
 } 

方案三：使用 flex 布局

首先要设置父容器 display:flex;
justify-content:center; 实现水平居中
align-items:center; 实现垂直居中

div{
			width:500px;
			height:100px;
			border:1px solid red;
			margin:50px auto;
			display:flex;
			justify-content:center;
			align-items:center;
}

这五种效果都是一样的，效果如图所示：