css居中

一：水平居中

1，行内元素居中
行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，可通过给父元素设置 text-align:center 来实现。另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响，否则一切都是无用功。

.div1{
        text-align:center;
    }

<div class="div1">Hello world</div>

2，块状元素居中
（1）定宽块状元素居中

.top{
  width:200px;
  border:2px solid red;
  margin:0 auto;
  text-align:center;
}

（2）不定宽块状元素居中
方法一：使用 display : table；然后设该元素“左右margin”值为“auto”来实现居中

.top{
  display:table;
  margin:auto;
  background:red;
}

方法二：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值（变成inline-block就可以设置宽高）。

.container{
    text-align:center;
 }
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;  //怎么这一句用不用都是一样效果的？
 }

<div class="container">
    <ul>
        <li>Hello world</li>
        <li>Hello world</li>
    </ul>
</div>

方法三：通过给父元素设置float，父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中

.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
    border:2px solid red;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
    border:2px solid green;
}

<div class="wrap">
    <div class="wrap-center">Hello world</div>
</div>

二：垂直居中

1，父元素高度确定的单行元素
通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高，指在文本中，行与行之间的 基线间的距离 )。

.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}

2，父元素高度确定的多行文本
方法一：使用table标签，同时设置vertical-align:middle

.wrap{
    height:300px;
    background:#ccc;
    vertical-align:middle;   /* td 标签默认情况下就默认设置了 vertical-align 为 middle，可以不需要显式地设置 */
}

<table>
    <tbody>
        <tr>
            <td class="wrap">
                <div>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

.wrap{
    background:#ccc;
    display:table;
    vertical-align:middle;
}

<div class="wrap">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</div>