• 固定宽度的block元素的水平居中
  • 方法一: 设置左右margin为auto

    .center {
        margin-left: auto;
        margin-right: auto;
        width: 200px;
    }
    

  • 方法二：

    .center {
        position: relative;
        left: 50%;
        width: 200px;
        margin-left: -100px;
    }
    

注意：当把img元素设置成block元素之后，其宽度默认就是图片本身的宽度，所以也属于有固定宽度的。

• 不确定宽度的元素的居中
  • 方法一：设置父级元素text-align:center;然后自身display:inline;
  • 方法二：利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动”(推荐)

    .parent { /* 其父级元素要设置清楚浮动，不然可能会出现问题*/
      float: left;
      position: relative;
      left: 50%;
    }
    .children {
      position: relative;
      left: -50%;
    }
    

  • 方法三：使用table作为容器的方法来实现.(Table标签本身并不是块级元素,当我们不设置table的宽度的话,他里面的宽度是由他内部元素的宽度撑起来的。但即使我们没有设置table的宽度,直接设置table的外边距margin:0 auto;就可以实现水平居中了!这样我们就可以通过设置table水平居中,间接使里面的内容居中。)

    <table class="center"><tr><td>元素</td></tr></table>
    .center{margin:0 auto}
    

  • 方法四：利用table table-cell(利用table的可以宽度可以内容撑起来的特性)

    .container {
      display:table;
      margin:0 auto;
    }
    .children {
      display:table-cell;
    }
    

提示：下面所说的前、后，指的是元素在 html 节点中的书写顺序。

对块级元素的影响

1. 块级元素在float元素的前面和后面的显示效果是不一样的;
2. 块级元素在前，则float元素就会在块级元素之后另起一行来显示;
3. 块级元素在后，则块级元素会占据float元素所在行，且被float元素覆盖;
   但是块级元素内的inline元素遇到float元素则会环绕其显示;
4. 注意：上面的显示规则跟块级元素是否设置宽度无关;

二、对inline元素的影响

1. inline元素不多说，inline元素会环绕float元素显示;
2. 直接看demo了解细节

三、float元素对float元素的影响

1. 父容器的宽度足够容纳所有子元素，则在一行显示
2. 父容器的宽度不够容纳所有子元素，则后面元素会另起一行显示

请看：demo

自己在实际开发中经常会遇到要水平、垂直居中一个元素，甚至是多个元素实现水平垂直居中。但是每次到用的时候都会出现这样那样的问题，很是纠结。So，我索性就狠下来心花点时间来总结一下这方面的知识，也帮助我来理解、融汇贯通。好了，废话不多说，直接看 demo。

此Demo中包括一下两点：

• 单个元素的水平垂直居中
• 多个元素的水平垂直居中

• vertical-align
  • 设置元素在垂直方向上的对齐方式

注意：
1.垂直对齐属性只对行内元素有效
2.垂直对齐属性只对父级元素设置了line-height的元素

• 基线对齐（vertical-align : baseline）

  • 所谓的基线对齐就是：使元素的基线同父元素的基线对齐
  • 默认对齐方式是基线对齐

• 中间对齐（vertical-align : middle）

  • 使元素的中线同父元素的中线对齐，也就达到了垂直居中的效果