垂直居中、水平居中或者说水平垂直居中的方案很多种，但在实际当中，不管是具体业务或者入职面试，很多同学都有失足之处。那么使用CSS实现居中效果困难吗？显然不是。实际上有许多方法可以实现居中效果，但在具体情况中，我们往往无法判断哪种方法最合适。@Chris Coyier整理了一篇有关于居中的实现方法的文章，可以说这篇文章涵盖了各式各样的居中方法，希望这篇文章能帮你解决选择困难症~

vertical-align 是 CSS 中的一个常见属性，但是当你第一次学习和使用它的时候，往往会很困惑，所以我觉得有必要深入了解它的用法。最常见的使用方式就像下面这样：img { vertical-align: middle;}。从这里可以看到，vertical-align 属性被应用到了 img 标签上。img 标签是naturally inline elements,，它们可以嵌入到文本之中，而 vertical-align 属性就是用来控制它们相对于所在行的对齐方式。在我的印象中，开发者使用 vertical-align 最大困惑就是在块级元素上设置该属性不会有任何效果。

虽然使用 CSS 创建居中效果需要耍一些花招，特别是垂直居中效果，但我认为由此生出的诋毁，对于 CSS 则是不公平的。实际上我们有太多的方式使用 CSS 创建居中效果了，而且作为一名前端开发者，你真的有必要对其中的原理了解一二。写这篇文章的目的不是为了向各位解释这些方法的工作原理，而是介绍将这些方法编写为 Sass mixin 的方式，继而将它们复用到各类项目中。如果你还不熟悉使用 CSS 创建居中效果的方法，我建议你仔细阅读以下这篇文章：Centering In CSS: A Complete Guide。

这篇文章是@勾三股四根据@Philip Walton的《How to Become a Great Front-End Engineer》一文翻译的，看了译文觉得很有启发，特意将译文转载到此与大家一起分享。希望大家能通过这篇文章找到方向，将自己打造成一名卓越的前端攻城师。

网页上实现float:left或者float:right效果并不是件困难的事情，但一直无法有一个类似于float:center的效果。就是浮动居中。就算是顶尖的CSSer要实现这样的效果也是一件非常困难的事情。那么这篇文章，将向大家展示了如何使用伪元素来模拟一个浮动居中的效果。

在iOS系统上常常能看到高斯模糊(Gaussian Blur)效果，而这种效果早期使用CSS来实现是较为痛苦的一件事情。其实，早上2011年，浏览器就开始对CSS filters规范有所支持。也就是说在2011年浏览器就可以实现Filters效果。但这种效果基本上都只运用在SVG上(只有SVG支持Filter效果)，而且只有Firefox浏览器支持，并且只能运用在HTML上。这也造就CSS要实现Filters效果是非常蛋疼的一件事情。

饼图，即使是最简单的只有两种颜色的形式，用Web技术创建也并不简单，尽管都是一些常见的信息内容，从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现，或是使用大型的JavaScript框架来设计更复杂的图表。尽管这个东西并不像它曾经看起来那么难以实现，但是也没有什么直接并且简单的方法。但是，现在已经有很多更好、更易于维护的方式来实现它。

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。摘自W3C：浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。上面的引述几乎总结了一个BFC是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。

当你想实现两列等宽，左边一些内容，右边一些内容时，基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半，并且可以明显的区分他们。在CSS中有很多方法都可以实现，那么来看看如何用多种方法实现这种两列等宽布局。