區塊水平置中

• 使用 margin-left: auto和margin-right: auto
• 參考下例會發現區塊區域置中，然後只有最上層(父層) wrap 有設定 auto，其他未設定卻會沿用
• wrap 不設定高度 height 是可以依照子層需求來作延伸，有猜到嗎？Box Model 是 100 w x 200 h

<div class="wrap">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

.wrap {
    width: 100px;
    /* height: 100px; */
    background: black;
    margin-left: auto;
    margin-right: auto;
}

.header {
    height: 50px;
    background: blue;
}

.content {
    height: 100px;
    background: red;
}

.footer {
    height: 50px;
    background: green;
}

呈現結果如下(截圖可能沒有很置中)

文字水平置中

• 如果在剛剛的區塊內輸入文字，會發現文字內容是靠左的，若想要文字置中，可以使用 text-align: center

<div class="wrap">
    <div class="header">1</div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="footer">
        <p>地址：xxx
            <br>
            TEL：ooo
        </p>
    </div>
</div>

針對 .footer 的內容調整，其他不變

.footer {
    /* height: 50px; */
    background: green;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

結果如下

box-sizing

• 預設值：content-box，如之前計算，會把 border、padding 加進去
• 修改為：border-box，就以定義的 W x H 為最大，其他值往內縮

<div class="box-a"></div>
<div class="box-b"></div>

.box-a {
    width: 100px;
    height: 100px;
    border: 10px solid blue;
    padding: 10px 20px;
    background: red;
    box-sizing: content-box;
}
.box-b {
    width: 100px;
    height: 100px;
    border: 10px solid blue;
    padding: 10px 20px;
    background: red;
    box-sizing: border-box;
}

可以比較差異
box1：160 w x 120 h
box2：100 w x 80 h

可以使用偽元素將格式一起更換(但我自己測試並沒有統一，還要再驗證)

• 原因為我的 CSS 已經有設定 box-sizing: content-box; 才會導致沒有統一
• 在沒設定 box-sizing 時，預設是 content-box，利用偽元素才將設定改為 border-box

*, *::before, *::after {
    box-sizing: border-box;
}

參考資料

• CSS 偽元素 ( before 與 after )

次回

應該會進入 flex 了！