1、利用padding实现内容垂直居中
.wrap {
margin: 50px auto;
background-color: #ccc;
padding: 30px;
text-align: center;
}
2、绝对定位
在块元素上添加绝对定位属性和负margin,如果不是块元素可以转换成inline-block。
如果是未知元素大小的情况可以采用transform:translate(-50%,-50%);来处理，但是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使用，父元素内的所有元素都会整体垂直居中，无论子元素是block元素，还是inline元素。同时配合 text-align: center;inline和inline-block元素还可实现水平居中。
<!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="#">我是行内元素</a>
</div>
</body>
</html>
第二种情况是，子元素之间的垂直居中对齐。如果只有一个对象，想让它在父元素中对齐，可以添加一个空的比较对象
father:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
如果有多个对象，可以给它们都添加vertical-align:middle,从而实现子元素之间的垂直对齐。
4、利用行高实现
元素的高度和行高相等实现居中，一般用于文字。
.demo {
width: 100px;
height: 100px;
line-height: 100px;
color: red;
}
5、flex实现
.parent{
height: 600px;
border: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
border: 3px solid green;
width: 300px;
}
网友评论