核心提示：方案一缺点：嵌套层级深将父级元素设置为display:table;内层元素设置为display:table-cell;!DOCTYPE htmlhtml lang=zh-CNheadmeta char...
方案一缺点：嵌套层级深
将父级元素设置为display:table;
内层元素设置为display:table-cell;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{ box-sizing: border-box; }
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
.container{
background:#ddd;
width:100%;
height:100%;
/* 关键点 */
display:table;
}
.box{
/* 关键点 */
display:table-cell;
text-align: center;
vertical-align: middle;
}
.cell{
width:50%;
height:300px;
background:#e4393c;
/* 关键点 */
display:inline-block;
}
</style>
</head>
<body>
<p class="container">
<p class="box">
<p class="cell"></p>
</p>
</p>
</body>
</html>
方案二：缺点：只适用于宽高固定的情况
利用position：absolute;和margin:auto;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{ box-sizing: border-box; }
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
.container{
background:#ddd;
width:100%;
height:100%;
}
.box{
background:#e4393c;
width:50%;
height:300px;
/* 关键点 */
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<p class="container">
<p class="box">
</p>
</p>
</body>
</html>
方案三： 缺点：低版本ie不支持
利用display:flex;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{ box-sizing: border-box; }
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
.container{
background:#ddd;
width:100%;
height:100%;
/* 关键点 */
display:flex;
}
.box{
background:#e4393c;
width:50%;
height:300px;
/* 关键点 */
margin:auto;
}
</style>
</head>
<body>
<p class="container">
<p class="box">
</p>
</p>
</body>
</html>
方案4：
利用position：absolute;和transform:translate();
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{ box-sizing: border-box; }
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
.container{
background:#ddd;
width:100%;
height:100%;
/* 关键点 */
position:relative;
}
.box{
background:#e4393c;
width:50%;
height:300px;
/* 关键点 */
position:absolute;
left:50%;
top:50%;
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<p class="container">
<p class="box">
</p>
</p>
</body>
</html>
