---
tags: css
---

# margin: 0 auto; 水平置中

* 如果我們在做水平置中時該注意的範圍

> Html架構

<div class="wrap">
        <div class="header"></div>
        <div class="content">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, quam?</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, quam?</p>
        </div>
        <div class="footer"></div>
    </div>

* 在wrap最外層時 我們設定寬跟置中、因為內容無法確認所以不用寫限制

.wrap{
width: 200px;
background-color:#000;
margin: 0 auto;
}

* content 因為內容關係 所以不用寫上限置高度，並且以padding 將內容往內留白，因為有兩個p段落屬於"區塊元素"會自適應左右向下排列、再用margin-bottom做區隔

.header{
width: 200px;
height: 50px;
background: #789;
margin: 0 auto;
}
/*  padding 將內容往內留白*/
.content{
background: #456;
margin: 0 auto;
padding: 20px;
}
/* 因為有兩個p段落 區塊元素會向下排列 */
.content p {
color: #fff;
margin-bottom: 20px;
}

.footer{
background: #987;
height: 50px;
margin: 0 auto;
}