div水平垂直居中
2016-09-01 21:33
274 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
/*兼容IE8以上,修改CSS后可兼容IE6、7*/
.child1{
display: inline-block;
width: 200px;
height: 200px;
background-color: yellow;
}
.parent1{
text-align: center;
width: 600px;
height: 200px;
background-color: gray;
}
/*IE8以上支持，修改html结构可以支持IE6、7*/
.child2{
display: table;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: yellow;
}
.parent2{
width: 600px;
height: 200px;
background-color: gray;
}
/*IE9以上*/
.child3{
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: yellow;
}
.parent3{
position: relative;
width: 600px;
height: 200px;
background-color: gray;
}
/*IE9以上*/
.child4{
width: 200px;
height: 200px;
background-color: yellow;
}
.parent4{
display: flex;
justify-content:center;
width: 600px;
height: 200px;
background-color: gray;
}
/*IE9以上*/
.child5{
margin: 0 auto;
width: 200px;
height: 200px;
background-color: yellow;
}
.parent5{
display: flex;
width: 600px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div class="parent1">
<div class="child1">demo</div>
</div>
<div class="parent2">
<div class="child2">demo</div>
</div>
<div class="parent3">
<div class="child3">demo</div>
</div>
<div class="parent4">
<div class="child4">demo</div>
</div>
<div class="parent5">
<div class="child5">demo</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
/*IE8以上，修改html结构可以支持IE6、7*/
.parent1{
display: table-cell;
vertical-align: middle;
width: 200px;
height: 600px;
background-color: gray;
}
.child1{
width: 200px;
height: 200px;
background-color: yellow;
}
/*IE9以上*/
.parent2{
position: relative;
width: 200px;
height: 600px;
background-color: gray;
}
.child2{
position: absolute;
top: 50%;
transform:translateY(-50%);
width: 200px;
height: 200px;
background-color: yellow;
}
/*IE9以上*/
.parent3{
display: flex;
align-items:center;
width: 200px;
height: 600px;
background-color: gray;
}
.child3{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent1">
<div class="child1">demo</div>
</div>
<div class="parent2">
<div class="child2">demo</div>
</div>
<div class="parent3">
<div class="child3">demo</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
/*兼容性比较好*/
.parent1{
text-align: center;
display: table-cell;
vertical-align: middle;
width: 600px;
height: 400px;
background-color: gray;
}
.child1{
display: inline-block;
width: 200px;
height: 200px;
background-color: yellow;
}
/*IE9以上*/
.parent2{
position: relative;
width: 600px;
height: 400px;
background-color: gray;
}
.child2{
position: absolute;
left: 50%;
top: 50%;
tansform:translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: yellow;
}
/*IE9以上*/
.parent3{
display: flex;
justify-content:center;
align-items:center;
width: 600px;
height: 400px;
background-color: gray;
}
.child3{
display: inline-block;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent1">
<div class="child1">demo</div>
</div>
<div class="parent2">
<div class="child2">demo</div>
</div>
<div class="parent3">
<div class="child3">demo</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 