在用CSS寫布局的時(shí)候浑娜，經(jīng)常要用到水平居中與垂直居中佑力。首先看下面這個(gè)div：
<body>
<div>
<span>這是一個(gè)例子</span>
</div>
</body>
在body中定義了一個(gè)div，div中有一個(gè)內(nèi)聯(lián)元素span筋遭。下面分情況討論如何讓div和span在父容器中水平與垂直居中。
水平居中
- 塊狀元素
要讓上述的div水平居中非常簡(jiǎn)單漓滔，利用margin即可编饺。將margin的水平方向設(shè)置為auto即可達(dá)到水平居中效果。
div{
width:200px;
margin:0 auto;
}
- 內(nèi)聯(lián)元素
對(duì)于文本响驴、圖片等內(nèi)斂元素的居中透且，可以通過設(shè)置其塊狀元素的父容器中的text-align屬性：
div{
width:200px;
margin:0 auto;
text-align: center;
}
在上述div中的樣式中加入text-align:center的屬性，則div中的內(nèi)聯(lián)元素就會(huì)居中顯示豁鲤。
垂直居中
- 塊狀元素
塊狀元素的垂直居中可以利用相對(duì)定位或者絕對(duì)定位秽誊，當(dāng)元素設(shè)置相對(duì)定位或者絕對(duì)定位時(shí)，設(shè)置其top和left為50%琳骡，這樣它的左上角就會(huì)在已定位的父容器的中間锅论。（注：此處設(shè)置相對(duì)定位不起作用，因?yàn)?0%是相對(duì)于body的高度的一半楣号，而此時(shí)body的高度由div決定最易。而絕對(duì)定位在此處是相對(duì)于初始包含塊的怒坯，也就是畫布或者HTML元素。）
為了讓整體元素垂直居中耘纱，而不是左上角居中敬肚，可以借助margin屬性，令其margin-left為負(fù)的寬度的一半束析，margin-top為負(fù)的高度的一半艳馒。如下：
div{
width:200px;
height: 500px;
top:50%;
left:50%;
position:absolute;
margin-top:-250px;
margin-left:-100px;
}
這樣就可以實(shí)現(xiàn)div的垂直居中，但是這種方法的前提是需要知道div的寬高员寇，如果不知道的話該怎么辦呢弄慰？
那就可以利用CSS3中的屬性transform
div{
top:50%;
left:50%;
position:absolute;
transform: translate(-50%,-50%);
}
該屬性可以相對(duì)于自身元素大小的50%進(jìn)行移動(dòng)，不用提前指定元素大小蝶锋，所以相比來說這種方式比上面的margin的方式適應(yīng)性更強(qiáng)陆爽。
- 內(nèi)聯(lián)元素
內(nèi)聯(lián)元素的居中可以通過設(shè)置line-height屬性來定義:
span{
line-height: 300px;
}
這樣該元素就會(huì)在這個(gè)300px的高度中居中顯示。
特殊情況：flex布局
對(duì)于父容器為flex布局的塊狀元素的居中扳缕，可以對(duì)齊父容器設(shè)置：
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
