其實(shí)這個(gè)問(wèn)題踪区，許多人都會(huì)遇到，當(dāng)然我也遇到過(guò)吊骤，最近想學(xué)前端的小伙伴突然來(lái)問(wèn)我缎岗，如何讓塊居中，我想了想水援，告訴他一種方法密强，塊元素居中是一件很麻煩的事情，不過(guò)塊元素居中又經(jīng)常用蜗元，據(jù)說(shuō)這個(gè)問(wèn)題已經(jīng)圍繞前端好久了或渤。好在最近在拜讀CSS揭秘這一本書(shū)，感覺(jué)學(xué)到了許多奕扣，推薦給大家薪鹦。
1、最普通的方法惯豆，用定位和margin負(fù)值就可以實(shí)現(xiàn)池磁。
? ?div{
? ? ? ? ? position:absolute;
? ? ? ? ? top:50%;
? ? ? ? ? left:50%;
? ? ? ? ? ?margin-top:-3px;
? ? ? ? ? ?margin-left:-6px;
? ? ? ? ? ?width:12px;
? ? ? ? ? ?height:6px;
? ? ? ? }
如題：這個(gè)也可以簡(jiǎn)單的縮減一下：
? ?div{
? ? ? ? ? position:absolute;
? ? ? ? ? top: calc（50%-3px）;
? ? ? ? ? left:（50%-6px）;
? ? ? ? ? width:12px;
? ? ? ? ? height:6px;
? ? ? }
當(dāng)然以上的這個(gè)方法我們要知道固定的寬高，其實(shí)很麻煩的楷兽，如果寬高要是奇數(shù)的話地熄，就會(huì)很坑。
2芯杀、第二個(gè)方法可以完美解決固定寬高的問(wèn)題端考，我們不需要計(jì)算了雅潭！不過(guò)要注意，一旦出現(xiàn)半像素將會(huì)導(dǎo)致元素的一些顯示會(huì)有模糊却特，畢竟在CSS中沒(méi)有十全十美的技巧扶供。
只需要2個(gè)東西：一個(gè)是絕對(duì)定位，另一個(gè)是transform位移（CSS3）
? ? ?div{
position：absolute;
top：50%裂明；
left：50%;
transform：translate（-50%椿浓，-50%）;
}
3、使用flex布局闽晦，好吧扳碍，是不是很眼熟，沒(méi)錯(cuò)尼荆，flex在圖片居中上已經(jīng)發(fā)揮了他的效果左腔，如今它又在此襲來(lái)，是不是很有魅力呢捅儒？
請(qǐng)注意液样，最后一個(gè)方法，如果使用后巧还，不僅垂直居中鞭莽，橫向也會(huì)居中哦！
