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代码

  
  

  
  

  测试文本

  
  

  
  

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%是相对于父元素的宽高。其实并没彻底居中，有必定的偏差。

---

三种居中都已经介绍完了，总的来讲都是水平垂直各自两种，而后组成三种造成水平垂直居中。方法虽很少，够用就好！！！