CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

CSS设置居中的方案总结，主要是垂直居中的梳理。最后改于2021年2月4日，根据目前常用的方案进行了调整。

英文：https://medium.com/actualize-... 编译：缪斯 CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值，看起来似乎需要做的工作也就这样嘛！然而在一些大型工程中CSS的组织是一件复杂和…

overflow：hidden是overflow属性的一个神奇用法，它可以帮助我们隐藏溢出的元素，清除浮动和解除坍塌。当某一个属性拥有这么多的功能时，难免使人难以把握，不过不要怕，只要信：看完这篇文章，我相信你绝对能对overflow:hidden的用法熟练掌握。 当父 div…

不得不承认 Vue 的css解决方式非常自然简洁，相比之下 css 一直是 React 的痛。 从旧宠 css modules 到 JSS 的各种衍生，到新宠 styled-components。几十种的解决方式，上百篇的教程和比较，已经说明了一切。大家一直在寻找最好的最适合自…

你以为这些是经过PS软件处理出来的？不不不，纯粹的是用css写出来的，很神奇把。 CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN CSS标准里包含了一些已实现预定义效果的函数。 调整图像的对比度。 给图像…

在我们编写CSS的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们常常会使用下面这样的CSS代码加以实现（absolute+transform思路）： 大…

一个读者留言说他自己写起 JS 和 React 来觉得很有趣，但是当要处理样式的时候，他就很沮丧。 编程是有趣的，解决问题也是有趣的。当你经历千辛万苦让你的程序正确运行的时候，这种感觉，简直不可思议。 然而，哦，糟糕，是 CSS。你的 App 运行得很好，就是样式有点糟糕，那么…

1. 重构和架构 重构是指在不改变代码行为的前提下，重写代码，使其更加简洁、易于复用。 架构是指软件项目的各个不同部件之间的组合方式。 2. CSS选择器的优先级 !important 优先级最高，可覆盖行内样式。不可以添加到行内样式属性中。 3. 如何编写优质的 CSS 但是…