一、下图给出一个大的容器（相当于浏览器窗口），里面有3个元素，如何实现三种不同的居中？    

    wKiom1OEwc2DobprAAB0xYkhuuM798.jpg

    居中结果：

    wKiom1OEwfzhqk3sAAB3ixnjh5M201.jpg


二、居中对齐分类

    1. text-align: center;  (最常见)

    2. margin: 0 auto;

    3. line-weight: H(所在容器的高度) 


三、个个击破

    1. text-align: center;

            对于普通文本、内联元素有用

       可以实现容器中“居中对齐1”，在容器中的居中。


    2. margin: 0 auto;(暂且将包裹“居中对齐3”的叫居中对齐2)

            对于块状元素有用

       “居中对齐2”为块状元素，让其左右外边距为“auto”,那么左右就默认相等、且在容器中居中

        其上下外边距可以任意设定。

    

    3.line-weight:H(所在容器的高度)

            对于块状元素中的文本有用

        “居中对齐3”文本在“居中对齐2”块状元素当中，当文本的行高=H（居中对齐2的高度时），

         文本就在上下方向上居中了，如果你想再实现左右方向居中的话，text-align: center;就

         可以解决。