居中问题

居中问题

• CSS中的居中可分为水平居中和垂直居中；水平居中分为行内元素居中和块状元素居中；块状元素分为定宽块状元素居中和不定宽块状元素居中。
• 行内元素：在一条直线上排列（默认宽度只与内容有关），都是同一行，水平方向排列；行内元素不能包含块状元素，只能包含文本或者其他行内元素；行内元素设置width,height,margin,padding无效；常见行内元素：<a>,<b>,<img>,<input>,<label>,<select>,<span>,<button>等。
• 块状元素：各占据一行（默认宽度和父元素一致），垂直方向上排列，从新行开始，结束接着一个断行；块状元素可以包含行内元素和块状元素；常见的块状元素：<div>,<form>,<table>,<td>,<th>,<h1>等。
• inline-block:既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性,例如<input>,<img>

水平居中

1. 行内元素居中

    .ele {
        text-align: center;
    }
    <span class='ele'>hello world!</span>
   

2. 块状元素居中

• 定宽块状元素居中（块状元素的宽度为固定值）

    .ele {
        width: 200px;
        border: 1px soild red;
        margin: 0 auto;//实现居中
    }
    <div class='ele'>hello world</div>
  

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

    .ele {
        display: table;
        margin: 0 auto;
    }
    <div class='ele'>hello world</div>
  

方法二：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果

    .ele {
        display: inline;
    }
    .container {
        text-align: center;
    }
    <div class='container'>
        <div class='ele'>
            hello world
        </div>
    </div>

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

    .container {
        float: left;
        position: relative;
        left: 50%;
        clear: both;
    }
    .ele {
        position: relative;
        left: -50%;
    }
    <div class='container'>
        <div class='ele'>
            hello world
        </div>
    </div>

垂直居中

• 垂直居中可分为父元素高度确定的单行文本，以及父元素高度确定的多行文本

1. 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现

    .ele h2 {
        margin: 0;
        height: 100px;
        line-height: 100px;//与高度一致
    }
    <div class='ele'>
        <h2>Hello world</h2>
    </div>
   

2. 父元素高度确定的多行文本
   方法一：

    .ele {
        display: table;
        vertical-align: middle;
    }
    <div class='ele'>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
    </div>
   

方法二：设置块级元素的display为table-cell,激活vertical-align

    .ele {
        height: 300px;
        display: table-cell; // IE8+,Chrome,Firefox
        vertical-align: middle;
    }
    <div class='ele'>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</>
    </div>