[英]Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page
[英]How to align two div horizontally and vertically in middle of page with header and footer?
有很多方法可以获取此解决方案。 这很简单:
的HTML
<!DOCTYPE html>
<html lang="en">
<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" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<header class="container-fluid">HEADER</header>
<main>
<div class="center">
<div id="container-1" class="">DIV 1</div>
<div id="container-2" class="">DIV 2</div>
</div>
</main>
<footer class="container-fluid">FOOTER</footer>
</body>
</html>
的CSS
header {
background-color: red;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
footer {
background-color: green;
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
}
#container-1 {
padding: 100px;
margin-bottom: 150px;
background-color: yellow;
}
#container-2 {
padding: 100px;
background-color: blue;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.