垂直居中對(duì)齊的CSS示例代碼
發(fā)布時(shí)間：2014-02-08 16:51:46 作者：佚名 
我要評(píng)論
我要評(píng)論垂直居中對(duì)齊在網(wǎng)頁(yè)布局中非常實(shí)用，下面有段css代碼，個(gè)人感覺(jué)還不錯(cuò)，大家可以參考下
垂直居中對(duì)齊的核心代碼如下：
.elment{
position:relative;
top:50%;
transform:translateY(-50%);
}
具體參見(jiàn)如下案例，利用less將居中對(duì)齊的代碼攜程mixins。
html
<div class="outer">
<div class="inner">vertical align anything with less<div>
</div>
css
.verticalAlign{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.outer{
width:400px;
height:200px;
border:1px solid #000;
margin:10px;
text-align:center;
}
.inner{
.verticalAlign;
}
復(fù)制代碼
代碼如下:.elment{
position:relative;
top:50%;
transform:translateY(-50%);
}
具體參見(jiàn)如下案例，利用less將居中對(duì)齊的代碼攜程mixins。
html
復(fù)制代碼
代碼如下:<div class="outer">
<div class="inner">vertical align anything with less<div>
</div>
css
復(fù)制代碼
代碼如下:.verticalAlign{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.outer{
width:400px;
height:200px;
border:1px solid #000;
margin:10px;
text-align:center;
}
.inner{
.verticalAlign;
}
相關(guān)文章
CSS實(shí)現(xiàn)同一行的圖片和文字垂直居中對(duì)齊的方法
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)同一行的圖片和文字垂直居中對(duì)齊的方法,涉及css中vertical-align:middle屬性的使用技巧,需要的朋友可以參考下2015-05-12- 在制作Web頁(yè)面時(shí)都有碰到CSS制作水平垂直居中，我想大家都有研究過(guò)或者寫(xiě)過(guò)，平時(shí)工作收集了幾種不同的方式制作垂直居中方法，但每種方法各有千秋在此與大家分享或許對(duì)初學(xué)2013-09-06
- 這篇文章主要介紹了css兩種垂直居中對(duì)齊解決方案的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2019-04-30