css兩種垂直居中對齊解決方案(小結(jié))
發(fā)布時間：2019-04-30 15:29:49 作者：Big_fat_cat 
我要評論
我要評論這篇文章主要介紹了css兩種垂直居中對齊解決方案的相關(guān)資料,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
第一種垂直居中方法
利用vertical-align：middle進行垂直方向上的居中對齊，此方法需要滿足的條件：
- 設(shè)置父元素的行高line-height等于父元素height的高度
- 子元素必須是行內(nèi)塊級元素display:inline-block;
- 子元素設(shè)置vertical-align：middle
- 此方法在開發(fā)中不能右浮動(不能靠右邊)
下方是完整代碼，可以新建一個HTML文件進行測試(綠色的盒子)：
<html>
<head>
<title>導航條</title>
<meta charset="utf-8" />
</head>
<style>
*{
margin:0;
padding:0;
}
.div1{
height:200px;
background:yellow;
/*行高等于容器高度*/
line-height:200px;
}
.div2{
width:100px;
height:100px;
background:green;
/*行內(nèi)塊級元素*/
display:inline-block;
/*中線和父元素基線上方出對其，參考字母"x"*/
vertical-align:middle;
}
.div3{
width:100px;
height:100px;
background:red;
display:inline-block;
}
</style>
<body>
<div class="div1">
xxxxxxxxxxx
<div class="div2" >
</div>
<div class="div3" >
</div>
</div>
</body>
</html>
第一種方法結(jié)束。
第二種垂直居中方法
這種方法比較暴力，利用定位解決：
- 父元素開啟相對定位
- 子元素絕對定位
- 子元素先向下移動父元素的50%，此時子元素的頂部與父元素的中線對齊了
- 子元素再向上移動自身高度"height"的一半，此時子元素的中線和父元素的中線對齊了
- 此方法可以右對齊，設(shè)置子元素right：0px;即可
下方是完整代碼，可以新建一個HTML文件進行測試(綠色的盒子)：
<html>
<head>
<title>導航條</title>
<meta charset="utf-8" />
</head>
<style>
*{
margin:0;
padding:0;
}
.div1{
height:200px;
background:yellow;
/*相對定位開啟*/
position:relative;
}
.div2{
width:100px;
height:100px;
background:green;
/*絕對定位*/
position:absolute;
/*可以右對齊*/
right:0px;
/*先向下移動父元素的50%，此時子元素的頂部與父元素的中線對齊了*/
top:50%;
/*再向上移動自身高度"height"的一半，此時子元素的中線和父元素的中線對齊了*/
margin-top:-50px
}
</style>
<body>
<div class="div1">
<div class="div2" >
</div>
</div>
</body>
</html>
第二種方法結(jié)束。
總結(jié)
上面兩種方法的特點都是讓子元素的中線和父元素的中線對齊。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 在前端布局過程中，我們實現(xiàn)水平居中比較簡單，一般通過margin:0 auto;和父元素 text-align: center;就能實現(xiàn)。今天小編給大家?guī)砹薈SS實現(xiàn)垂直居中的幾種方法小結(jié)，感興2019-05-14
這篇文章主要介紹了CSS實現(xiàn)垂直居中的七個方法實例代碼詳解,需要的朋友可以參考下2019-05-06css實現(xiàn)元素垂直居中的常用方法(總結(jié))
本文給大家分享幾種方法介紹css實現(xiàn)元素垂直居中的常用方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-01
這篇文章主要介紹了CSS未知高度垂直居中的實現(xiàn)，詳細的介紹了幾種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-08
這篇文章主要介紹了利用css樣式實現(xiàn)表格中字體垂直居中的方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-16
