css实现水平垂直居中的6中方法
程序员文章站
2022-04-24 22:16:44
...
第一种：使用position的相对定位（position:relative和position:absolute;margin:auto;配合）。
这种方法我面试的时候跟别人说，他们都蜜汁自信的说”这个不可能“，你回去试试，当时真的觉得他们也太自信了吧，很是无语。这次把我知道的方法总结出来。
兼容：ie8以上。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用position的相对定位（position:relative和position:absolute;margin:auto;配合）</title>
<style>
.out{
width:100%;
height:500px;
background:blue;
position:relative;
}
.in{
width:20%;
height:20%;
background:yellow;
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
}
</style>
</head>
<body>
<div class="out">
<div class="in">兼容ie8及以上</div>
</div>
</body>
</html>
第二种：使用position和css3中的transform配合。未知宽度 。
兼容：ie9以上
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position transform 元素未知宽度 兼容ie9及以上</title>
<style>
.out{
width:100%;
height:500px;
background:blue;
position:relative;
}
.in{
width:20%;
height:20%;
background:yellow;
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="out">
<div class="in">兼容：ie9以上</div>
</div>
</body>
</html>第三种：固定宽度 使用position相对定位和margin配合。
这里与第一种方法不一样，这里居中的div的宽度是固定的。
兼容：ie7以上
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>固定宽度 position的相对定位</title>
<style>
.out{
width:100%;
height:500px;
background:blue;
position:relative;
}
.in{
width:300px;
height:100px;
background:yellow;
position:absolute;
left:50%;
top:50%;
margin:-50px 0 0 -150px;
}
</style>
</head>
<body>
<div class="out">
<div class="in">兼容ie7及以上</div>
</div>
</body>
</html>
第四种： table-cell布局
兼容：ie8及以上
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table-cell布局 兼容ie7以上</title>
<style>
.box{
width: 100%;
height: 200px;
background-color: #FFCCFF;
display: table;
}
.out{
width:100%;
height:500px;
background:blue;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.in{
width:20%;
height:20%;
background:yellow;
display:inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="out">
<div class="in">兼容ie8及以上</div>
</div>
</div>
</body>
</html>
第五种：table-cell布局
兼容：ie7以上。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table-cell布局 兼容ie7以上</title>
<style>
.box{
width: 100%;
height: 200px;
background-color: #FFCCFF;
display: table;
position:relative;
overflow:hidden;
}
.out{
width:100%;
height:500px;
background:blue;
display:table-cell;
text-align:center;
vertical-align:middle;
position:absolute;
top:50%;
}
.in{
width:20%;
height:20%;
background:yellow;
display:inline-block;
position:relative;
top:-10%;
}
</style>
</head>
<body>
<div class="box">
<div class="out">
<div class="in">兼容ie8及以上</div>
</div>
</div>
</body>
</html>第六种：flex布局
兼容：ie10以上
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style>
.out{
width:100%;
height:500px;
background:blue;
display:-webkit-flex;
display:flex;
justify-content:center;
align-items:center;
}
.in{
width:20%;
height:20%;
background:yellow;
}
</style>
</head>
<body>
<div class="out">
<div class="in">兼容ie10及以上</div>
</div>
</body>
</html>
上一篇： Web应用Word生成
下一篇： 你不知道的秘密之JS对象转化为数组的方法