参考：http://louiszhai.github.io/2016/03/12/css-center/
一、水平居中方法
- 1、 text-align:center;
- 2、 margin:0 auto;
- 3、 width:fit-content;
- 4、 flex;
- 5、 盒模型;
- 6、 transform
- 7、 绝对定位
1、使用text-align:center、 margin:0 auto进行居中显示
textali水平居中.png
<!DOCTYPE html>
<html>
<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">
<title>水平居中</title>
<style>
div {
/* 内容水平居中 */
text-align: center;
width: 800px;
/* 盒子水平居中 */
margin: 100px auto;
height: 80px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
使用text-align: center实现水平居中
</div>
</body>
</html>
2、fit-content水平居中
<!DOCTYPE html>
<html>
<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" />
<title></title>
<style>
.parent {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: 100px auto;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
3、flex水平居中
.son{
display: flex;
justify-content: center;
}
4、盒模型水平居中
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
5、绝对定位水平居中
.son{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;
}
一、垂直居中方法
- 1、 单行文本, line-height
- 2、 行内块级元素, 使用 display: inline-block, vertical-align: middle; 加上伪元素辅助实现
- 3、 vertical-align
- 4、 flex;
- 5、 盒模型;
- 6、 transform
- 7、 绝对定位
1、单行文本, line-height实现垂直居中
line-height垂直居中.png
<!DOCTYPE html>
<html>
<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">
<title></title>
<style>
.parent {
width: 300px;
height: 150px;
border: 1px solid red;
margin: 100px auto;
text-align: center;
}
span {
display: inline-block;
width: 100px;
height: 80px;
line-height: 80px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="parent">
<span>123</span>
</div>
</body>
</html>
2、行内块级元素
<!DOCTYPE html>
<html>
<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" />
<title></title>
<style>
.parent {
width: 800px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
}
.parent::after,
.son {
display: inline-block;
vertical-align: middle;
}
.parent::after {
content: "";
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<span>测试测试</span>
</div>
</body>
</html>
3、flex实现垂直居中
.parent {
display: flex;
align-items: center;
}
4、transform实现垂直居中
.son{
position:absolute;
top:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
5、绝对定位实现垂直居中
.son{
position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;
}
