1拾弃、利用padding實(shí)現(xiàn)內(nèi)容垂直居中
.wrap {
margin: 50px auto;
background-color: #ccc;
padding: 30px;
text-align: center;
}
2、絕對(duì)定位
在塊元素上添加絕對(duì)定位屬性和負(fù)margin,如果不是塊元素可以轉(zhuǎn)換成inline-block顽腾。
如果是未知元素大小的情況可以采用transform:translate(-50%,-50%);來(lái)處理委煤，但是transform兼容性需要考慮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vertical align</title>
</head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
position:relative;
}
a{
display:inline-block;
position:absolute;
left:50%;
top:50%;
width:100px;
height:30px;
margin-left: -50px;
margin-top: -15px;
}
</style>
<body>
<div class="box">
<a href="">我是文字</a>
</div>
</body>
</html>
3、使用vertical-align:middle
使用vertical-align:middle;有兩種情況：
第一種情況是在父元素上配合table-cell使用，父元素內(nèi)的所有元素都會(huì)整體垂直居中赌髓，無(wú)論子元素是block元素从藤，還是inline元素。同時(shí)配合 text-align: center;inline和inline-block元素還可實(shí)現(xiàn)水平居中锁蠕。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box div{
/* display:inline-block; */
width:250px;
height:40px;
border:1px solid ;
line-height:40px;
}
</style>
<body>
<div class="box">
<div>我是塊元素我不受text-align控制</div>
<a href="#">我是行內(nèi)元素</a>
</div>
</body>
</html>
第二種情況是夷野，子元素之間的垂直居中對(duì)齊。如果只有一個(gè)對(duì)象荣倾，想讓它在父元素中對(duì)齊悯搔，可以添加一個(gè)空的比較對(duì)象
father:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
如果有多個(gè)對(duì)象，可以給它們都添加vertical-align:middle,從而實(shí)現(xiàn)子元素之間的垂直對(duì)齊舌仍。
4妒貌、利用行高實(shí)現(xiàn)
元素的高度和行高相等實(shí)現(xiàn)居中，一般用于文字铸豁。
.demo {
width: 100px;
height: 100px;
line-height: 100px;
color: red;
}
5灌曙、flex實(shí)現(xiàn)
.parent{
height: 600px;
border: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
border: 3px solid green;
width: 300px;
}
