方式一:使用绝对定位实现。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
position: absolute;
width: 100px;
height: 200px;
background-color: red;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="box1">盒子</div>
</body>
</html>
方式二:使用固定定位结合css3中的transform属性。注意使用css3的属性的时候,记得加上私有前缀。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
position: absolute;
width: 100px;
height: 200px;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box1">盒子</div>
</body>
</html>
方式三:使用绝对定位。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
position: absolute;
width: 100px;
height: 200px;
background-color: red;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">盒子</div>
</body>
</html>
方式四:使用css3中的弹性盒子。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
body {
display: flex;
}
.box1 {
width: 100px;
height: 200px;
background-color: red;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
</body>
</html>
方式五:使用table-cell结合vertical实现垂直居中。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
width: 500px;
height: 500px;
background-color: red;
vertical-align: middle;
display: table-cell; /* 垂直居中 */
text-align: center; /* 水平居中 */
}
span {
display: inline-block;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="box1"><span>盒子1</span></div>
</body>
</html>
方式五:使用伪元素。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html {
width: 100%;
height: 100%;
text-align: center;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
vertical-align: middle;
display: inline-block;
}
body:before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
</body>
</html>
方式六:使用弹性盒子。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html {
width: 100%;
height: 100%;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
</body>
</html>