css实现盒子水平垂直居中的方法

效果图

html部分:

<div>
		<img src="./img/1.png">
</div>

css部分:

• 给子元素(要水平垂直居中的元素)设置margin: auto 方法

div{
width: 400px;
height: 400px;
position: relative;
border: 3px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

• 给父元素设置弹性布局display: flex;方法

div{
width: 400px;
height: 400px;
border: 3px solid #465468;
/* display: -webkit-flex;兼容Webkit内核的浏览器，必须加上-webkit前缀。 *//* Safari */
display: flex;
/* -webkit-align-items: center; */
align-items: center;/* 垂直对齐方式 */
/* -webkit-justify-content: center; */
justify-content: center;/*水平对齐方式*/
}

• 给子元素设置margin-top、margin-left方法

div{
width: 400px;
height: 400px;
border: 3px solid #465468;
position: relative;
}
img{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

• 给子元素设置transform方法

div{
width: 400px;
height: 400px;
border: 3px solid #465468;
position: relative; 
}
img{
width: 200px;
height: 200px; 
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}