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

    HTML的居中对齐_艺术

    居中结果:

    HTML的居中对齐_艺术_02


二、居中对齐分类

    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;就

         可以解决。