垂直居中對齊的CSS示例代碼
發(fā)布時間：2014-02-08 16:51:46 作者：佚名 
我要評論
我要評論垂直居中對齊在網(wǎng)頁布局中非常實用，下面有段css代碼，個人感覺還不錯，大家可以參考下
垂直居中對齊的核心代碼如下：
.elment{
position:relative;
top:50%;
transform:translateY(-50%);
}
具體參見如下案例，利用less將居中對齊的代碼攜程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;
}
復制代碼
代碼如下:.elment{
position:relative;
top:50%;
transform:translateY(-50%);
}
具體參見如下案例，利用less將居中對齊的代碼攜程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;
}
相關(guān)文章
- 這篇文章主要為大家介紹了CSS實現(xiàn)同一行的圖片和文字垂直居中對齊的方法,涉及css中vertical-align:middle屬性的使用技巧,需要的朋友可以參考下2015-05-12
- 在制作Web頁面時都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，平時工作收集了幾種不同的方式制作垂直居中方法，但每種方法各有千秋在此與大家分享或許對初學2013-09-06
- 這篇文章主要介紹了css兩種垂直居中對齊解決方案的相關(guān)資料,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2019-04-30