方法一：通过display：table布局
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>上下左右居中</title>
</head>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
display: table;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
.container-inner {
margin: 0 auto;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.container-content {
width: 60%;
margin: 0 auto;
}
p {
text-align: center;
}
</style>
<body>
<div class="container">
<div class="container-inner">
<div class="container-content">
<p>这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容</p>
<p>这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容</p>
<p>这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容</p>
</div>
</div>
</div>
</div>
</body>
</html>
方法二：
通过绝对定位的方式进行计算；
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>上下左右居中</title>
</head>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
.container-inner {
position: absolute;
left: calc((100% - 480px)/2);
top: calc((100% - 127px)/2);
}
</style>
<body>
<div class="container">
<div class="container-inner">
<div class="container-content">
<p>这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容</p>
<p>这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容</p>
<p>这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容</p>
</div>
</div>
</div>
</div>
</body>
</html>
希望对你有帮助。。。。。。。。。。。。。。。。
网友评论