css在div中心 |简单的旅游css中文模板

.center1 {
display: flex;
justify-content: center;
align-items: center;
}

上面的代码定义了一个具有 flex 布局的 div，将其内容居中，用来达到垂直和水平居中。

.center2 {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代码将 div 相对于其父元素定位，使其上下和左右居中，使用 transform 属性将其定位到中心。

接下来让大家看一些更高级的方法。首先，如果 div 的高度和宽度都是已知的，那么大家可以通过这样做将其居中：

.center3 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height: 100px;
width: 200px;
background-color: #f2f2f2;
}

这样做的关键在于使用 position: absolute; 和设置顶部和左侧值为 50%。然后，大家使用负的 margin-top 和 margin-left 来水平和垂直居中 div，并设置高度和宽度。

如果情况不是这样，可以使用 Flexbox。以下代码确保 div 始终保持正方形，并且该正方形始终以其宽度居中：

.center4 {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 0;
padding-bottom: 50%;
background-color: #f2f2f2;
}

这里，大家使用 padding-bottom 的方式来确定 div 的高度，该高度等于它的宽度（50%），从而创建一个正方形。使用 display: flex; 将内容垂直和水平居中。