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

css文字居中

作者:我视你如狗ㄟ   发布日期:2025-07-24   浏览:75

/* 使用 flexbox 实现文字居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度为视口高度 */
}

/* 或者使用 text-align 和 line-height 实现单行文字水平和垂直居中 */
.center-text {
  text-align: center;      /* 水平居中 */
  height: 100vh;           /* 设置容器高度 */
  line-height: 100vh;      /* 行高等于容器高度,实现垂直居中 */
}

解释说明:

  1. Flexbox 方法:通过 display: flex 将容器变为弹性盒子,justify-content: centeralign-items: center 分别用于水平和垂直居中。这种方法适用于多行文本或复杂布局。
  2. Text-align 和 Line-height 方法:通过 text-align: center 实现水平居中,line-height 设置为与容器高度相同,可以实现单行文本的垂直居中。这种方法仅适用于单行文本。

如果你需要更复杂的居中方式或其他特定场景,请提供更多细节。

上一篇:css gap

下一篇:css滚动条样式修改

大家都在看

css 红色

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

animation css3

css 自定义滚动条

css flex gap

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

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

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

Laravel 中文站