關於text-align無法居中的問題

昨天項目，一直出現一個無法居中的問題，最后發現竟然是text-align的問題，才發現自己對text-align的理解還是不夠透徹，於是在此再舉例分析下。

css中的元素一共有三類：塊元素、行內塊和內聯元素。

三者的區別就是：

　　　　　　　　塊元素可以設置寬高，會獨占一行；

　　　　　　　　行內塊擁有塊元素的所有特性，除了無法獨占一行；

　　　　　　　　內聯元素無法設置寬高，不會獨占一行。

而text-align的作用就是：可以為文字和內聯元素、行內塊設置水平居中，即使該文字是在塊元素內。

以下是例子：

以下是html代碼：

　　　　 <div class="wrapper">
            <img src="img/2.png"/><br>
            <span>這是span內聯元素中的文字</span>
            <div>這是塊元素div中的文字</div>
        </div>
        
        <ul>
            <li class="wrapper">
                <span class="span"></span>
                <div class="div"></div>
                <span class="span2">
                    我是行內塊元素，是有文字的span
                </span><br>
                <div class="div2">我也是行內塊元素，是div</div><br>
                <span class="span2"></span><br>
                <div class="div2"></div><br>
            </li>
        </ul>

以下css代碼：

　　　　　　 .wrapper {
                width: 500px;
                border: 1px solid black;
                margin: 0 auto;
                text-align: center;
            }
            .span {
                display: block;
                width: 50px;
                height: 50px;
                background: #bac;
            }
            .div {
                width: 50px;
                height: 50px;
                background: hotpink;
            }
            .span2 {
                display: inline-block;
                width: 150px;
                height: 50px;
                background: #bac;
            }
            .div2 {
                display: inline-block;
                width: 150px;
                height: 50px;
                background: hotpink;
            }

以下是顯示的示例：

所以，當使用text-align時，一定要注意，只能對文字（包括塊元素中的文字）、內聯元素和行內塊進行水平居中，對塊是沒有用的。

注： 若對脫離文檔流（比如position：absolute）的塊元素水平居中，可對要求水平居中的塊元素使用： left: 50%;  transform: translateX(-50%);（有瀏覽器兼容性，需全部寫上）