Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css display flex

作者:躲藏我的霸气   发布日期:2025-06-26   浏览:53

/* 使用 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字体间距

大家都在看

css 红色

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

css 自定义滚动条

css flex gap

css上一个兄弟元素怎么找到

css文字超出隐藏变省略号鼠标上去展示完整

css文字不允许换行

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站