HTML的居中对齐

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

    

    居中结果：

    

2、居中对齐分类

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

    2. margin: 0 auto;

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

3、个个击破

    1. text-align: center;

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

       能够实现容器中“居中对齐1”，在容器中的居中。

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

            对于块状元素有用

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

        其上下外边距能够任意设定。

    

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

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

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

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

         能够解决。