利用偽元素實現元素居中

效果：

代碼：

<div class="test">
    <div class="testChild">ddddddddddddddddddddddddddddddddddddddddddd
         ddddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffff
           d</div>
</div>

.test{
    background:white;
    height:200px;
    width:200px; &:before{ display:inline-block; vertical-align:middle; content:''; height:100%;
    }
    .testChild{
        width:100%;
        word-break:break-all; display:inline-block; vertical-align:middle;//通過display：inline-block；和vertical：middle；讓元素跟這個偽元素對齊
        color:red;
    }
}

效果：

代碼：

<div class="test">
     <div class="testChild2"></div>
</div>

.test{
    background:white;
    height:200px;
    width:200px; &:before{ display:inline-block; vertical-align:middle; content:''; height:100%;
    }
    .testChild2{
        width:30px;
        height:30px;
        background:red; display:inline-block; vertical-align:middle;
    }
}

 

<div class="test">
     <div class="testChild2"></div>&nbsp;<div class="testChild2"></div>
</div>

 只有inline-block，inline還有table的東西能用vertical-align這個屬性