/* 使用 display: flex 实现一个简单的水平居中布局 */
.container {
display: flex; /* 将容器设置为弹性盒子模型 */
justify-content: center; /* 水平居中对齐子元素 */
align-items: center; /* 垂直居中对齐子元素 */
height: 100vh; /* 设置容器高度为视口高度 */
}
.item {
width: 100px; /* 设置子元素宽度 */
height: 100px; /* 设置子元素高度 */
background-color: lightblue; /* 设置子元素背景颜色 */
}
<div class="container">
<div class="item"></div>
</div>
上一篇:css 两端对齐
下一篇:css字体间距
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站