写一个垂直居中样式

Ashy-

于 2023-04-29 22:51:48 发布

阅读量137

点赞数

分类专栏：前端笔记用户体验极佳文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_43794299/article/details/130444598

版权

前端笔记同时被 2 个专栏收录

14 篇文章

订阅专栏

用户体验极佳

5 篇文章

订阅专栏

文章通过对比传统的行高和文本对齐方式，展示了如何利用Flex布局实现元素的垂直居中。重点介绍了`display:flex`，`justify-content:center`，`margin-top`和`transform:translateY(-50%)`的组合使用，同时提到了MDN作为学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex 实现：

本来是没打算写这个的（可能觉得好像没啥意思），但是看到了这个页面：
（实在不好依稀，没忍住吐槽一下：）在这里插入图片描述

这种一看就知道是设置行高实现的居中：

text-align: center;	/* 水平居中（仅盒模型中生效） */
line-height: 720px;	/* 高度，写死的 */
color: #bec9d2;	    /* 文字颜色... */

不过能实现功能就好，这本身也没什么，不是吗？

这里我想用 flex 实现一下，仅做分享：
在这里插入图片描述
这里写点注释：

  /* text-align: center; */
  /* line-height: 720px; */
  display: flex;	/* flex 布局 */
  color: #bec9d2;	
  justify-content: center;	/* 水平居中 */
  margin-top: 50%;			/* 距离上方 50% 的高度（这里 div 本身没有设置高度，则会读取父 div 的高度）*/
  transform: translateY(-50%);	/* 自身向上偏移 50% 的高度，这里取的是当前 div 的高度*/