水平居中與垂直居中
水平居中
text-align:center
- 單行文本居中
<div class='box'>
hello你好
</div>
.box{
text-align: center;
}
- 單行文本和a鏈接
<div class='box'>
hello
<a class='bt'>點(diǎn)我</a>
</div>
.box{
border: 1px solid red;
text-align: center;
}
.bt{
padding: 3px;
color:#fff;
}
padding:3px的話按鈕會(huì)超出border,因?yàn)樯舷聀adding的背景會(huì)占用呢铆，但內(nèi)容不變辉词，如果想要按鈕在邊框里面抓狭，只需設(shè)置inline-block。
- 兩個(gè)按鈕居中
<div class='box'>
<a class='bt'>點(diǎn)我</a>
<a class='bt'>點(diǎn)我</a>
</div>
.box{
text-align: center;
}
.bt{
display: inlie-block;
}
- 圖片也是text-align:center;
塊級(jí)元素居中
因?yàn)閴K級(jí)元素本身就是占滿一行的所以淋淀，無所謂居中不居中泻蚊，一般說的塊級(jí)元素居中指的是有固定寬度的元素帝璧。只需margin:0 auto+固定寬度
垂直居中
第一種思路
- 一般高度是由內(nèi)容撐開的，所以只需要padding-top=padding-bottom就行了
- 單行文字/按鈕纸颜，在本元素上加height=line-height當(dāng)然也可以用上面的方法。
第二種思路
- 內(nèi)聯(lián)元素
- 外部的div如果是固定的寬度绎橘，則直接寫line-height=高度
- 如果高度不是固定的則直接寫上下padding相等胁孙。
- 塊級(jí)元素
上下padding相等或者line-height=height
以上這種常規(guī)的寫法可以滿足60%的需求。
脫離文檔流的元素都是塊級(jí)元素金踪，即使span元素浊洞。并且定位后才能用z-index。 - 浮動(dòng)元素居中
浮動(dòng)元素不可能居中胡岔。
如果發(fā)現(xiàn)把浮動(dòng)元素居中則需求有問題法希，此時(shí)應(yīng)該去掉浮動(dòng)用inline-block元素。 - 絕對定位元素居中
- 固定寬高元素絕對定位
- 不固定寬高
固定寬高絕對定位
.element{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -300px;
border: 1px solid;
}
不固定寬高
css3中的transform
.box{
position: absolute;
border: 1px solid black;
width: 300px;
padding: 10px;
left: 50%;
top: 20%;
box-sizing: border-box;
transform: translate(-50%,-20%)
}
margin:auto實(shí)現(xiàn)絕對定位元素的居中
.element{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
