前言
我们平常实现的垂直居中不是真正的垂直居中？何出此言！很多时候，往往自己明明正确的实现了垂直居中，但是 UI/UX 依旧说你的垂直居中有问题，然后自己仔细一看确实好像在视觉效果上存在一些偏差，但是仔细看自己实现的垂直居中代码却丝毫没有问题。今天我们就探讨一下这个有趣问题的由来、解决方案以及文字排版的未来。
Github
2024年11月09日
我们平常实现的垂直居中不是真正的垂直居中？何出此言！很多时候，往往自己明明正确的实现了垂直居中，但是 UI/UX 依旧说你的垂直居中有问题，然后自己仔细一看确实好像在视觉效果上存在一些偏差，但是仔细看自己实现的垂直居中代码却丝毫没有问题。今天我们就探讨一下这个有趣问题的由来、解决方案以及文字排版的未来。
Github
2024年11月09日
居中构图是只有新手才会使用的构图吗？用居中构图拍出来的照片就会很烂吗？
居中构图可能是大多数人在刚开始接触摄影时最先了解的构图方法，它简单好上手，甚至是完全不懂摄影的人，也会使用这种构图方法。
2024年11月09日
简单的场景：是知道父元素和子元素大小，直接margin:xx auto;text-align:center;
面试场景：父元素大小未知，子元素大小已知
来源地址：
方法一：table-cell文本/图片水平垂直居中
主要实现代码：
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;
2024年11月09日
在github上或是其他的后台管理模板上经常看到漂亮的登录页面，今天我们就基于css3及element撸一个"骚气"的登录页面。用到的知识点包括flex布局、绝对定位、相对定位及基本的element。初版的效果如下所示
好了废话少说吧，进入正题，首先说下布局如下所示
<div class="login_box">
<div class="login_mask"></div>
2024年11月09日
前言
老板的手机收到一个红包，为什么红包没居中？
如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。
你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。
这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。
2024年11月09日
元素垂直水平居中。
经常会被面试官问到如何把元素水平垂直居中？给大家演示一下。
·看一下div，首先div可以水平垂直居中，需要有固定的宽度、高度，还有背景颜色，识别它。
·怎么样去做？直接来给大家写了，这个就不用多解析了，用绝对定位，设置高度为50%，左边为50%。这个时候就把div的左上方的点设置到了整个屏幕的中间。
2024年11月09日
做一个水平和垂直居中的模态弹框这么一个小需求，对于我们这些前端来说，应该是常事。
在css3出来以前，我们要想让元素既水平居中又要垂直居中只有一个办法（我能想到的），就是通过js计算，把它们定位到屏幕中间位置。这方法比较笨，也麻烦。
推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。
下面两种方式，可以让元素快速定位到屏幕中间。
2024年11月09日
使用 Flexbox 是一种简单而强大的居中方法。对于容器元素，设置 display: flex;，并通过 justify-content 和 align-items 属性将子元素水平和垂直居中。
.container {
display: flex;
justify-content: center;
align-items: center;
}