flex布局居中
在Flex布局中，要使容器内的子元素水平和垂直居中，可以将容器的justify-content属性设置为center（水平居中）和align-items属性设置为center（垂直居中）。
以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使用视口高度 */
}
.flex-item {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
</div>
</body>
</html>在这个例子中，.flex-container是一个Flex容器，它使用了Flex布局来居中它的子元素.flex-item。通过设置justify-content和align-items，子元素在水平和垂直方向上都被居中。
评论已关闭