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%);
}

八、结语

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

相关推荐
Mintopia29 分钟前
计算机图形学的奇幻之旅:第三天探索
前端·javascript·计算机图形学
Mintopia32 分钟前
Three.js 物理材质:打造 3D 世界的 “魔法皮肤”
前端·javascript·three.js
知识分享小能手1 小时前
Typescript学习教程,从入门到精通,TypeScript 泛型与类型操作详解(二)(17)
前端·javascript·学习·typescript·jquery·前端网页学习
stark张宇1 小时前
Web - Javascript 函数与DOM、BOM
前端
上海张律师1 小时前
组件截图sdk -- screenshot_hm介绍 ##三方SDK##
前端·harmonyos
_一条咸鱼_1 小时前
Android Runtime虚拟机实例创建与全局状态初始化(11)
android·面试·android jetpack
lineo_1 小时前
抛弃陈旧写法,你的uniapp定义globalData的正确姿势(setup语法糖)
前端·javascript
spionbo1 小时前
Vue 结合 D3 实现可拖拽拓扑图的技术方案及具体应用实例解析
前端·javascript
GIS之路1 小时前
OpenLayers 图形交互编辑
前端
ViceBoy_1 小时前
前端混淆的概念-缓存&存储
前端·面试