水平居中:
1.子父元素宽度固定,子元素设置margin:auto,并且子元素不能设置浮动,否则居中失效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
background-color: pink;
}
.item {
width: 200px;
height: 200px;
background-color: yellow;
margin:auto;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
2.子父元素宽度固定,父元素设置text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动,否则居中失效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
background-color: pink;
text-align: center;
}
.item {
width: 200px;
height: 200px;
background-color: yellow;
display: inline-block;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
水平垂直居中:
- 绝对定位+margin:auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.item {
width: 200px;
height: 200px;
background-color: yellow;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
2、绝对定位+margin反向偏移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.item {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
3、绝对定位+transform反向偏移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.item {
width: 200px;
height: 200px;
background-color: yellow;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
4、display:tabel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.parent {
display: table;
width: 300px;
height: 300px;
background-color:red;
text-align: center;
}
.son {
display: table-cell;
width:200px;
height: 200px;
background-color: yellow;
vertical-align: middle;
}
</style>
<body>
<div class="parent">
<div class="son">
5656
</div>
</div>
</body>
</html>
5、display: inline-block
.wrp5 {
text-align: center;
overflow: auto;
}
.box5 {
display: inline-block;
vertical-align: middle;
width: auto;
height: auto;
max-width: 90%;
max-height: 90%;
}
.wrp5:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
margin-left: -0.25em;
/* To offset spacing. May vary by font */
}
6、display: flex-box
.wrp6 {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.box6 {
width: auto;
height: auto;
max-width: 90%;
max-height: 90%;
}