【Css】奇淫巧技-元素分段居中

让某些元素均匀居中排列是前端布局中很常见的一个需求，笔者在遇到这个问题的时候查找了不少的解决方案，但几乎都无法达到一个通用的效果（相对距离布局），所以进行了些许的研究和尝试，希望大家能够有所借鉴。

1.需求

所谓元素均匀居中布局，指的就是让一些文字或者图片在一行中均匀排列，彼此之间的间距相等，例如就是本博客上方的四个分类（Create/Skill...那四个），当然这四个分类实际上并不都居中，不过思想基本是一样的。
为了实现这种需求，最笨的方法就是固定定位，也就是基于每一块元素固定的坐标，但显然这种做法对于通用性而言并不友好，它并不能够在浏览器尺寸变化是进行跟随。
另一种方法就是使用fixed进行绝对地相对位置定位，但这样做了之后往往会导致你的所有其他元素都要用同样的方式定位，对于布局又不怎么友好。
同样的问题也出现在absolute类型的定位上，虽然可以达成目的，但这样做会让其他的元素产生依赖，而且对于每一个这样的元素分别定位的方法显得非常繁杂、违背了简单的设计理念。

2.实现

所以我们就必须要有一个简单的方法去实现这个需求，既通用又不繁杂，这个方法如下：

1.行分割：
对这些元素所处的同一行进行分割，比如我有四个元素，就将这一行分成四个25%的块：

.one_block{
    display: inline-block;
    width: 25%;
}

2.元素居中：
比如对于文字而言，我们可以这么写：

.center_text{
    text-align: center;
}

这样一来，你的文字就实现了通用而简单的均匀居中。

3.进阶：
那么如果我不想居中，而是想让两边的文字处于最左和最右侧，并且还能够达到等距均匀分布的效果，怎么办？
实际上本博客的四个分类就是要实现这样的需求，这时候只需要做一下小小的计算就可以了：
首先仍然进行行分割，分成四个25%的块。
然后给最左边和左右边的文字设定样式：

.text0{
    text-align: left;
}
.text3{
    text-align: right;
}

然后根据需求计算中间两块文字的定位百分比：

.text1{
    padding-left: 33%;
}
.text2{
    padding-right: 33%;
}

如此便可以达到需求，其他情况类推即可。