CSS设置小技巧

水平居中

对于元素的水平居中，有三种情况：

行内元素（文字、图片等）：text-align: center;
定宽块状元素（有设置宽度的block元素）：margin: 0 auto;
不定宽块状元素

对于不定宽块状元素，居中的方式有以下三种：

加入table标签
设置 display: inline;
设置 position: relative; 和 left: 50%;

加入table标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样，但不需要给表格设置宽）。

这种方法的优点是简单易用，缺点是增加了无语义标签，嵌套深度大。

设置display: inline;

改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。

这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

设置 position: relative; 和 left: 50%;

通过给父元素设置 float（作用：完全由子元素撑开大小），然后给父元素设置 position:relative 和 left:50%（下图中的container），子元素设置 position:relative 和 left:-50% （父元素的最左边贴紧页面的一半，所以子元素要回来一半）来实现水平居中。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>不定宽块状元素水平居中</title>

<style>

    .wrap {

        float: left;

        position: relative;

        left: 50%;

    }

    .wrap-center{

        background:#ccc;

        position: relative;

        left: -50%;

    }

</style>

</head>

<body>

    <div class="wrap">

        <div class="wrap-center">我们来学习一下这种方法。</div>

    </div>

</body>

</html>

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。

垂直居中

对于父元素高度确定的单行文本，只需要将height和line-height设置为相同的值即可。

对于父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。（是middle不是center！！）

说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在行内元素和表格元素中才会生效。所以又要插入 table 标签了。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>父元素高度确定的多行文本</title>

<style>

    .wrap {

        height: 300px;

        background: #ccc;

    }

</style>

</head>

<body>

    <table>

        <tbody>

            <tr>

                <td class="wrap">

                    <div>

                        <p>看我是否可以居中。</p>

                        <p>看我是否可以居中。</p>

                        <p>看我是否可以居中。</p>

                        <p>看我是否可以居中。</p>

                        <p>看我是否可以居中。</p>

                    </div>

                </td>

            </tr>

        </tbody>

    </table>

    <table>

        <tbody>

            <tr>

                <td class="wrap">

                    <div>

                        <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>

                    </div>

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

效果如下：

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置父元素的 display 为 table-cell，激活 vertical-align 属性。

我们可以通过 display: table-cell; 将父元素“变成”表格元素，这样就可以使用 vertical-align 属性了。

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。另外将父元素“变成”表格元素会导致一种类似float的效果，所以必要时在最外层要再多套一个div。

方法三：这个方法可以同时做到垂直和水平居中，而且比较简单。

将元素设为绝对定位，且上下左右均为0
margin: auto

inline-block的对齐问题

之前在做IFE的一个小练习，在做一个输入框和按钮的时候，发现按钮始终不能贴紧父元素上边（如上图空隙），纠结了很久之后发现原来button标签自带 display: inline-block 属性。

inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。可以通过vertical-align属性设置这个默认基线，将其设置为 vertical-align: top; 之后，即可贴紧上边。