使用flex，只需要给父元素设置即可。若想只水平/垂直居中，则注释对应代码即可。
/* 父元素 */
.container{
width: 500px;
height: 500px;
background-color: blue;
display:flex;
align-items: center ; /*控制垂直居中*/
justify-content: center;/*控制水平居中*/
}
/* 子元素 */
.item{
width: 200px;
height: 200px;
background-color: red;
}
使用grid，与flex类似。只需要给父元素设置即可。若想只水平/垂直居中，则注释对应代码即可。
/* 父元素 */
.container{
width: 500px;
height: 500px;
background-color: blue;
display:grid;
align-items: center ; /*控制垂直居中*/
justify-content: center;/*控制水平居中*/
}
/* 子元素 */
.item{
width: 200px;
height: 200px;
background-color: red;
}
在使用 margin:auto使元素居中时，需要给父元素设置为position:relative;子元素设置position: absolute;具体实现垂直水平居中的代码如下。
/* 父元素 */
.container{
width: 500px;
height: 500px;
background-color: blue;
position: relative;
}
/* 子元素 */
.item{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/* 垂直居中 */
/*
top: 0;
bottom: 0;
margin: auto 0;
*/
/* 水平居中 */
/*
left: 0;
right: 0;
margin: 0 auto;
*/
/* 水平 垂直居中 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
- 在使用 translate使元素居中时，需要给父元素设置为position:relative;子元素设置position: absolute;具体实现垂直水平居中的代码如下。
/* 父元素 */
.container{
width: 500px;
height: 500px;
background-color: blue;
position: relative;
}
/* 子元素 */
.item{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/* 水平居中 */
/* left:50%;
transform: translate(-50%, 0); */
/* 垂直居中 */
/* top:50%;
transform: translate(0, -50%); */
/* 水平 垂直居中 */
left:50%;
top:50%;
transform: translate(-50%, -50%);
}