CSS 居中方法大全📖

引言💭

在写项目的时候总是遇到样式居中的问题,为了省去查阅时间,特作此篇。

这篇文章列举了最常见的几种居中方法,在样式调节的时候绝对能用上。

一、文本居中

1.1 水平居中文本

通过 text-align: center 来实现文本在其父元素中的水平居中。

arduino 复制代码
.text-center {
  text-align: center;
}

1.2 垂直居中单行文本(已知高度)

通过设置容器的 line-height 为其高度,实现垂直居中。

css 复制代码
.container {
  height: 100px;
  line-height: 100px; /* 与高度相同 */
}

二、块级元素居中

2.1 水平居中块级元素

通过设置 margin: auto 来水平居中已知宽度的块级元素。

css 复制代码
.block-center {
  margin-left: auto;
  margin-right: auto;
  width: 80%; /* 需要指定宽度 */
}

2.2 水平垂直居中块级元素(传统方法)

使用 position: absolutetransform 实现水平垂直居中。

css 复制代码
.container {
  position: relative;
  height: 300px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
}

三、Flexbox 居中(现代推荐方法)

3.1 水平垂直居中

使用 Flexbox 的 justify-contentalign-items 实现居中对齐。

css 复制代码
.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 100vh;         /* 需要设置高度 */
}

3.2 仅水平居中

通过 justify-content: center 实现水平居中。

css 复制代码
.flex-horizontal {
  display: flex;
  justify-content: center;
}

3.3 仅垂直居中

通过 align-items: center 实现垂直居中。

css 复制代码
.flex-vertical {
  display: flex;
  align-items: center;
  height: 100vh; /* 需要设置高度 */
}

四、Grid 居中

4.1 水平垂直居中

使用 place-items: center 来同时实现水平和垂直居中。

css 复制代码
.grid-container {
  display: grid;
  place-items: center; /* 简写属性 */
  height: 100vh;
}

4.2 单独控制水平和垂直居中

分别使用 justify-contentalign-content 控制水平和垂直居中。

css 复制代码
.grid-container {
  display: grid;
  justify-content: center; /* 水平居中 */
  align-content: center;   /* 垂直居中 */
  height: 100vh;
}

五、行内/行内块元素居中

5.1 水平居中

使用 text-align 来水平居中行内或行内块元素。

arduino 复制代码
.parent {
  text-align: center;
}

.inline-child {
  display: inline-block;
}

5.2 垂直居中

通过设置父元素的 line-height 和子元素的 vertical-align: middle 实现垂直居中。

css 复制代码
.parent {
  line-height: 100px; /* 与父元素高度相同 */
}

.inline-child {
  vertical-align: middle;
}

六、绝对定位居中

使用 position: absolutemargin: auto 将元素在父容器内居中。

css 复制代码
.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

七、视口居中(相对于浏览器窗口)

使用 position: fixedtransform 来实现相对于视口的居中。

css 复制代码
.viewport-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

八、结语

这就是最常见的几种方法了,如果还是不能够实现居中,还请麻烦自行查阅文档。希望这篇文章可以帮助到你。🫰🏻

相关推荐
quweiie18 分钟前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan201534 分钟前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin1 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
没有bug.的程序员1 小时前
JAVA面试宝典 -《安全攻防:从 SQL 注入到 JWT 鉴权》
java·安全·面试
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js