CSS => 居中问题攻略

这是一个考察开发者对css理解的比较初级的题，但是它的内在意义值得我们去好好研究以下这道题

我们从对知识的了解顺序，用尽可能多的方式去实现水平和竖直居中样式。

这里我们先约定一下，父级容器类名叫box，居中的元素叫item

一、对文字/链接的水平和竖直居中

让一个父元素为块级元素的行内元素水平居中，可以：

.box {
	width: 500px;
	height: 100px;
    text-align: center;
    /* line-height: 100px */
    /*line-height数值于容器高度相同时，达到竖直居中效果*/
}

涉及属性：

text-align:	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

line-height:	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

PS:举个例字，文字大小12px，line-height：100px，那么补充的空白 = 100-12/2 = 49px，分别填充到文字上方和下方。

二、单个块级元素的水平居中

你可以设置块级元素的 margin-left 和 margin-right 为 auto 来使它水平居中（这个块级元素是被设置了一个 width 属性了，否则它会占满宽度，这时候已经不需要居中了），有一种速记的写法：

.center-me {
    margin: 0 auto;
}

涉及属性：
盒子模型中的外边距margin

它的简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

margin:10px 5px 15px 20px; //上 右 下 左
margin:10px 5px 15px; //上 左右 下
margin:10px 5px;//上下 左右
margin:10px;//所有四个边距都是 10px

margin：	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

三、利用定位（position）

知道了容器的宽和高

在知道box和item的宽高后，我们需要通过简单的算数计算出偏移量，以此达到居中的目的，例如：

        .box1{
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        .item1{
            position:absolute;
            width: 100px;
            height: 100px;
            left: 50px;
            top: 50px;
            border: 1px solid black;
        }

涉及属性：position

定位是一个很有意思的属性，为了节省篇幅这里就不具体描述了，感兴趣的同学可以自己去百度一下～

不知道容器的宽和高，但知道居中元素的宽和高

.box1{
            position: relative;
            width: 100%;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid red;
        }
        .item1{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

请注意这里margin属性值是负数，这里我们可以理解成平移～

四、弹性盒子解决布局问题

在考虑兼容性的情况下，弹性盒子就是我“冲锋陷阵”的第一武器，除了它的属性和方法符合我们的思考逻辑以外，利用它进行布局对容器的宽高依赖性不强。

        .box1{
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid red;
        }
        .item1{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

这样就可以实现一个基本的水平垂直居中，这里我推荐大家看一下阮大大的相关文章阮大大-弹性盒子传送门

五、CSS3 transfrom:translate

竖直居中

元素高度未知？

可以通过 transform的平移属性 来达到目的：

.box {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

元素的宽和高未知？
如果你不知道元素的高度和宽度，你可以用 transform 属性，用 translate 设置 -50%（它以元素当前的宽和高为基础）来居中：

.box {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这里我们简单总结一下使用场景吧

当我们知道容器的宽和高的时候，以上多种方式都是可以实现效果的。
当我们不知道容器的宽和高的时候，利用弹性盒子、CSS新特性、定位实现效果。

请大家活用多种属性哦～