CSS之垂直居中
这些天忙完了一些项目后，终于有时间来总结一下了。自己就把做项目过程中的体会和理解到的一些东西和大家分享一下。有错请指正！！
在css中，元素居中显示，是基础也是一个小难点。我们经常不知为何总是不能把元素放在我们想放的地方。现在咱们就来总结一下一些常见的居中。至少能让我们解决平时开发的问题。
居中分为三种：
- 水平居中
- 垂直居中
- 水平垂直同时居中
我们一个一个来看，一个一个理解，解决。
1.水平居中
先来一段html代码：
<div class="parent">
<div class="child">
<p>测试文本 </p>
</div>
</div>
然后css文件中有两种处理方法
.parent
{
text-align: center;
}
或者
.child
{
width: 100px;
margin: 0 auto;
}
这两种方法都可以让元素水平居中显示。但是请注意，一个是设置的parent一个是设置的child。那他们的区别或者说优劣如何呢？
我的理解是：
- 第一种会让该元素内部的子元素都居中显示，有时这并不是我们想要的结果。
- 第二种是必须要设置宽度，有的同学没有设置宽度会发现margin 0 auto 不起作用。其实并非这样。只是他的默认宽度往往是继承父元素的宽度。所以看不到效果。
2.垂直居中
html代码
<div class="parent">
<div class="child">
<p>测试文本 </p>
</div>
</div>
css文件处理方法：
.parent
{
line-height：200px；
}
或者
. parent
{
display: table;
height: 200px;
}
. child
{
display: table-cell;
vertical-align: middle;
}
我们依旧可以看到，第一种只设置了parent元素，第二种设置了parent和child
我们可以这样理解这两种方法:
- 第一种可以看做就是把这个div设置成一行。由于在每一行中。内部的元素都是默认垂直居中，所以这样就直接达到了效果。
- 第二种把parent元素display设置成块级别的表格（table），然后再把要居中的子元素display设为表格中的一块（table-cell）。这样再设置这个table-cell的vertical-align: middle;假设你直接设置一个高度，再设置vertical-align: middle;这是没有效果的。原因是什么呢？首先我们来简单认识下vertical-align这个略神奇的元素。这个就是所谓的果冻型依赖元素。inline，inline-block，block依次可以看做，液体，果冻，固体。而vertical-align必须用在果冻级别的元素才能生效，而table-cell就是inline-block级别（果冻级别），所以Child元素display设置为table-cell可以产生效果，如果有不了解这三种类型的，可以去看一下这三者的区别和联系，再了解一下块级和行级元素。这里就不细说了。
ps：vertical-align还有很多用法，这里不再细讲，比较多。但是要注意的是，很多用法会出现浏览器不兼容的问题bug较多。所以注意多浏览器测试。笔者上面的方法经过测试。是兼容的。
3.水平垂直同时居中
html代码：
<div class="parent">
<div class="child">
<p>测试文本</p>
</div>
</div>
css文件内的处理方法
.parent
{
text-align: center;
line-height: 200px;
}
或者
.parent
{
text-align: center;
display: table;
height: 200px;
width: 500px;
}
.child
{
width: 100px;
display: table-cell;
vertical-align: middle;
}
再或者
.parent
{
line-height: 200px;
}
.child
{
width: 100px;
margin: 0 auto;
}
三种各有优劣势。需要大家理解块级元素，行级元素，然后根据业务需要进行选择。其实只要理解底层基本的东西。还有不少的奇淫技巧可以达到效果。
下面是这三种方法的说明：
- 第一种其实就算是之前两种居中的组合。line-heig必须得设置一个高度
- 第二种也是前两种的组合，只是高度宽度可以不用设置也会居中，只是这里不设置的话子元素默认的和父元素的宽高一样，就看不到效果了
- 第三种照例之前的组合，没什么可说。
咦，两两组合不应该四种吗。这里为何只有三种。是因为将parent元素设置为table和margin的那个组合不能达到效果。因为table-cell是inline-block级别的元素，margin无法操作种级别的。margin的喜好是block级。
其他类型
正如之前所说，还有很多方法可以干这些事。比如很多人喜欢的postion，它其实是一个定位的神器。只是对于居中这些我用position不多。这里就只举一个例子吧
对于上面的html代码
css里面我们可以这样
.parent
{
width: 400px;
height: 400px;
}
.child
{
position: relative;
top: 50%;
left: 50%;
}
position的relative是子元素相对于父元素的位置。这里设置的top: 50%;left: 50%;准确位置是子元素左上角和父元素的左上角。50%是相对于父元素的宽高。其实并没完全居中，有一定的误差。
