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

八、结语

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

相关推荐
Frankabcdefgh2 小时前
使用Rust + WebAssembly提升前端渲染性能:从原理到落地
面试·性能优化·rust·webassembly·工程化
赵大仁5 小时前
微前端统一状态树实现方案
前端·前端框架
阿珊和她的猫6 小时前
钩子函数和参数:Vue组件生命周期中的自定义逻辑
前端·javascript·vue.js
勘察加熊人6 小时前
vue展示graphviz和dot流程图
前端·vue.js·流程图
软件2056 小时前
【登录流程图】
java·前端·流程图
2501_915373888 小时前
Electron 从零开始:构建你的第一个桌面应用
前端·javascript·electron
贩卖黄昏的熊8 小时前
JavaScript 笔记 --- part8 --- JS进阶 (part3)
前端·javascript·笔记
CodeCipher8 小时前
Java后端程序员学习前端之CSS
前端·css·学习
卡戎-caryon10 小时前
【项目实践】boost 搜索引擎
linux·前端·网络·搜索引擎·boost·jieba·cpp-http
杨不易呀10 小时前
Java面试:微服务与大数据场景下的技术挑战
java·大数据·微服务·面试·技术栈