一、水平垂直居中的12种方法
1.absolute + 负margin
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh; /* 必须设置高度,这里我设置的高度是在当前窗口水平垂直居中 */
}
#div1{
position: absolute;
top:50%;
left: 50%;
height: 300px;
width: 300px;
margin-top: -150px; /* 设置为高度的一半 */
margin-left: -150px; /* 设置为宽度的一半 */
background-color: aqua;
}
</style>
<body>
<div id="div1">
</div>
</body>
2. absolute + margin:auto
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
}
#div1{
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
height: 300px;
width: 300px;
margin: auto;
background-color: aqua;
}
</style>
<body>
<div id="div1">
</div>
</body>
3.absolute + calc
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
}
#div1{
position: absolute;
top:calc(50% - 150px); /* 减去高度的一半 */
left: calc(50% - 150px); /* 减去宽度的一半 */
height: 300px;
width: 300px;
background-color: aqua;
}
</style>
<body>
<div id="div1">
</div>
</body>
4.absolute + translate
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
}
#div1{
position: absolute;
top:50%;
left: 50%;
width: 300px;
height: 300px;
transform:translate(-50%,-50%);
background-color: aqua;
}
</style>
<body>
<div id="div1">
</div>
</body>
5. flex + justify-content + align-items
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
#div1{
width: 300px;
height: 300px;
background-color: aqua;
}
</style>
<body>
<div id="div1">
</div>
</body>
6.flex + margin auto
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: flex;
height: 100vh;
}
#div1{
width: 300px;
height: 300px;
background-color: aqua;
margin: auto;
}
</style>
<body>
<div id="div1">
</div>
</body>
7. 网格布局：grid
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: grid;
height: 100vh;
}
#div1{
width: 300px;
height: 300px;
background-color: aqua;
justify-self: center;
align-self: center;
}
</style>
<body>
<div id="div1">
</div>
</body>
8.行内块元素 + line-height
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
line-height: 100vh;
text-align: center;
}
#div1{
width: 300px;
height: 300px;
background-color: aqua;
display: inline-block;
vertical-align: middle;
line-height: 300px;
}
</style>
<body>
<div id="div1">
<p>666666</p>
</div>
</body>
9.行内块元素 + ::after 伪元素选择器
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
line-height: 100vh;
text-align: center;
font-size: 0px;
}
#div1 {
width: 300px;
height: 300px;
display: inline-block;
vertical-align: middle;
background-color: aqua;
}
#div1::after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
<body>
<div id="div1">
</div>
</body>
10.行内块元素 + css-table
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#div1 {
width: 300px;
height: 300px;
display: inline-block;
background-color: aqua;
}
</style>
<body>
<div id="div1">
</div>
</body>
11. 行内块元素 + table
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
height: 100vh;
width: 100vw;
text-align: center;
}
#div1 {
width: 300px;
height: 300px;
display: inline-block;
background-color: aqua;
}
</style>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="box">
<div id="div1">
</div>
</td>
</tr>
</table>
</body>
12.行内块元素 + writing-mode
* {
margin: 0;
padding: 0;
}
#div1 {
height: 100vh;
width: 100vw;
text-align: center;
writing-mode: vertical-lr;
text-align: center;
}
#div2{
display: inline-block;
width: 100%;
writing-mode: horizontal-tb;
text-align: center;
}
#div3 {
width: 300px;
height: 300px;
display: inline-block;
background-color: aqua;
margin: auto;
}
</style>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
</body>