CSS垂直居中
2019-02-26 本文已影响0人
level
1、table-cell
<html>
<head>
<style type="text/css">
.middle {
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-con">垂直居中</div>
</div>
</body>
</html>
2、绝对定位
<html>
<head>
<style type="text/css">
.middle {
position: relative;
border: 1px solid #000;
width: 200px;
height: 200px;
}
.middle-con {
width: 100px;
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-con">垂直居中</div>
</div>
</body>
</html>
3、translate
<html>
<head>
<style type="text/css">
.middle {
position: relative;
border: 1px solid #000;
width: 200px;
height: 200px;
}
.middle-con {
position: absolute;
top:50%;
left:50%;
width:100px;
transform:translate(-50%,-50%);
text-align: center;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-con">垂直居中</div>
</div>
</body>
</html>
4、flex
<html>
<head>
<style type="text/css">
.middle {
border: 1px solid #000;
width: 200px;
height: 200px;
display: flex;
justify-content:center;
align-items:Center;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-con">垂直居中</div>
</div>
</body>
</html>
5、inline-block
<html>
<head>
<style type="text/css">
.middle {
border: 1px solid #000;
width: 200px;
height: 200px;
display: flex;
justify-content:center;
align-items:Center;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-con">垂直居中</div>
</div>
</body>
</html>
