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垂直对齐图文。