css如何使子容器军居中 |css 悬停li背景

css 样式图标，css整个页面滚动，css中的animation实例，css3 自动聚焦，safari css兼容性问题，四周外阴影 css，css 悬停li背景 css如何使子容器军居中 |css 悬停li背景

1. 使用Flex布局

.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

2. 使用Grid布局

.parent {
display: grid;
place-items: center; /* 水平垂直居中 */
}

3. 使用position和transform

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

4. 使用text-align和line-height

.parent {
text-align: center;
}
.child {
display: inline-block;
line-height: /* 父元素高度 */;
vertical-align: middle;
}

以上是一些实现子容器居中效果的方法，根据实际需求选择相应的方法即可。