CSS基本知识5-CSS对齐

要对齐的关键，在于理解块，行的概念，块的对齐主要靠自动计算定位，好比margin:auto，及浮动,因此最好的办法是尽可能使用行来对齐。

实例：

        .box {
            border: 1px solid #808080;
            height: 200px;
            line-height: 200px;
            width: 200px;
            text-align: center;
        }
        .content {
            color: #ff0000;
            display: inline-block;
            margin: 0 auto;
            width: 80px;
            height: 20px;
        }

咱们看看这里所涉及的知识：

首先，咱们外面有个盒子，即Box。

1.这个Box的line-height等于高度，那么就是内容就只有一行，固然若是是一半，那就是二行了。

2.Box的内容是行业元素，那么很明显，若是要显示两行，但中间要清除浮动，那就至关于“折行”了。

3.text-align:center;这表示，在这个Box的行内，元素居中显示，很明显，水平居中就实现了。只要把Box的内容变成行或行块，加上这个特性就能够水平居中。

4.值得注意的是,行块本质仍是行，即inline-block，那么对它使用margin:0 auto是不起做用的。而text-align却起做用了。可见，inline，inline除了有高宽，但本质仍是行内元素。

5.那么总结一下，水平居中，行内元素就使用text-align，那么，若是把DiV变成inline，那它里面的内容，就可使用text-align水平居中了。假如button居中就能够，而后做为行，要显示次Botton的高度，就设成line-height.

6.反过来，行内元素，要看成块处理，那么设成block模式，而后就可使用块的方式了，好比Width，Height，margin 0 auto;

7.对于块，margin:auto是能够水平居中的，但为何垂直无效呢？缘由很简单，就是由于“浮动”，因此咱们要使用position大法。

8.对内容块加入position:absolute,再设置上下左右为0，而后设置:margin:auto;直接全居中。

9.固然还有其它算法，就是上左50%，Margin上左设成高宽的一半负值。

10.最后就是使用 transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */

 

兼容性不错的主流用法是：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

Html5方式
.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

简单方式

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}变成行方式：两种：1.把行高和Box高设成同样，这就垂直居中了，最简单，text-align:center，这就水平居中了，或者是inline-block加margin:0 auto;2.设成inline，而后使用vertical-align:middle;这个有什么效果呢？就是把文字在行内垂直显示，好比在图文排列的时候就起做用了。总结就是有行高的状况下，设置line-height最简单，没有行高的状况下，使用vertical-align垂直对齐图文。