今天根據(jù)客戶的修改意見,修改一組有帶有縮略圖片的標(biāo)題的列表,圖片在列表的最左邊,圖片的大小是固定的.要求是,標(biāo)題字?jǐn)?shù)如果過多的話,可以折成兩行.但是要求垂直居中.最后解決了這個(gè)問題,但是沒有做兼容性的測(cè)試.
下面就是我收集到的垂直的居中的幾個(gè)方法,每個(gè)方法都拿出一個(gè)實(shí)例來演示
絕對(duì)居中
.relative-container{
position:relative
}
.absolute-container{
position:absolute;
margin:auto;
width:50%;
height:50%;
top: 0; left: 0; bottom: 0; right: 0;
}
一個(gè)栗子:垂直居中
優(yōu)點(diǎn):
- 兼容所有的瀏覽器
- 代碼簡(jiǎn)單,沒有太多的hack
缺點(diǎn):
- 必須聲明一個(gè)高度
- 在window phone上不起作用
負(fù)邊框居中
.n-margin-container{
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -170px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}
優(yōu)點(diǎn):
- 代碼量少
- 兼容性好
缺點(diǎn):
- 不支持自適應(yīng),不支持百分比和max-/min-屬性
- 邊距大小與padding,和是否定義box-sizing: border-box有關(guān)，計(jì)算需要根據(jù)不同情況罚渐。
變形
用transform屬性來代替負(fù)邊距
.transform-center{
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
優(yōu)點(diǎn):
- 相比負(fù)邊距,能夠自適應(yīng),支持百分比
- 代碼少
缺點(diǎn):
- IE8以下不支持
- 可能會(huì)影響其他的transform屬性
- 某些情況下回出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象
表格居中
算是終極大招吧
css:
.table-like{
display:table;
}
.table-cell-like {
display: table-cell;
vertical-align: middle;
}
.Center-Block {
width: 50%;
margin: 0 auto;
}
html:
<div class="table-like">
<div class="table-cell-like">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
優(yōu)點(diǎn)：
- 高度可變
- 內(nèi)容溢出會(huì)將父元素?fù)伍_唇辨。
- 跨瀏覽器兼容性好。
缺點(diǎn)：
- 需要額外html標(biāo)記
行內(nèi)塊元素
一個(gè)同事看到他用到過這種居中方法
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* 消除inline-block元素之間的間距,具體可以查看后面的參考 */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
html:
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
<div class="block" style="height: 200px;">
優(yōu)點(diǎn)：
- 高度可變
- 內(nèi)容溢出會(huì)將父元素?fù)伍_锉罐。
- 支持跨瀏覽器帆竹，也適應(yīng)于IE7。
缺點(diǎn)：
- 需要一個(gè)容器
- 水平居中依賴于margin-left: -0.25em;該尺寸對(duì)于不同的字體/字號(hào)需要調(diào)整脓规。
- 內(nèi)容塊寬度不能超過容器的100% - 0.25em栽连。
flex
.flex-parent{
display:flex;
justify-content:center;
align-items: center;
background: #AAA;
height: 300px;
}
.flex-child{
background: #222;
color: #FFF;
width: 100px;
height: 100px;
}
html:
<div class="flex-parent">
<div class="flex-child"></div>
</div>
優(yōu)點(diǎn)：
- 內(nèi)容塊的寬高任意，優(yōu)雅的溢出侨舆。
- 可用于更復(fù)雜高級(jí)的布局技術(shù)中秒紧。
缺點(diǎn)：
- IE8/IE9不支持。
- Body需要特定的容器和CSS樣式挨下。
- 運(yùn)行于現(xiàn)代瀏覽器上的代碼需要瀏覽器廠商前綴熔恢。
- 表現(xiàn)上可能會(huì)有一些問題
小結(jié)
- 絕對(duì)定位的方法比較萬金油
-
display:table的方法兼容性最好 -
flex是未來的趨勢(shì) -
transform是實(shí)現(xiàn)不知道要固定的框的大小情況下的好辦法,但是元素可能會(huì)模糊
