css子元素在父元素中居中
要使子元素在父元素中居中，可以使用CSS的Flexbox或Grid布局。以下是两种方法的示例代码：
Flexbox方法：
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 父元素高度 */
}
.child {
/* 子元素样式 */
}
<div class="parent">
<div class="child">居中内容</div>
</div>Grid方法：
.parent {
display: grid;
place-items: center; /* 水平垂直居中 */
height: 100vh; /* 父元素高度 */
}
.child {
/* 子元素样式 */
}
<div class="parent">
<div class="child">居中内容</div>
</div>在这两种方法中，.parent 是父元素的类，.child 是子元素的类。这些类应用了相应的CSS规则，使得子元素在父元素中水平和垂直居中。
评论已关闭