实现img垂直居中

 

针对情况：不知道img元素高度

<div>
                <img src="../../assets/hp.jpg"/>
                <span></span>
       </div>

原理： 给img元素添加一个并列的兄弟元素 ，将这个兄弟元素的高度设为父容器的高度 ，再对这个兄弟元素和img元素添加居中对齐，

div{

   height:600x; width : 800px;

}

img{

width:98%;vertical-align:middle;

}

span{

     display:inline-block;  height:100%；vertical-align:middle;

}

 

如果知道img元素的高度 采用绝对定位

 

 

div垂直居中 

<style>
			.content{
				width: 400px;
				height: 400px;
				background: bisque;
			}
			.center {
				width: 200px;
				height: 200px;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
				background: #87CEEB;
				margin: auto;
			}
		</style>
		<div class="content">
			<div class="center"></div>
		</div>

 

div垂直居中

<style>
			.content{
				width: 400px;
				height: 400px;
				background: bisque;
				display: flex;
				align-items: center;
			}
			.center {
				width: 200px;
				height: 200px;
				background: #87CEEB;
				margin: 0 auto ;
			}
		</style>
		<div class="content">
			<div class="center"></div>
		</div>