关于CSS-1:不同类型盒子水平垂直居中
2019-02-24 本文已影响0人
夜半暖人心
盒子水平垂直居中
HTML可以将元素分为行内元素、行内块元素、块元素三种,本文主要探讨三种元素在页面的水平垂直居中(以下代码可以复制到本地自己查阅效果).
1.行内元素:
设置父盒子行高=高度(垂直居中)+text-align:center(水平居中);
<!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">
<title>Document</title>
<style>
div {
/* height: 100px;可以省略,有设置line-height就默认行高和高一样 */
line-height: 100px;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>
<span>行内元素水平垂直居中</span>
</div>
</body>
</html>
2.行内块元素:
(1)弹性布局:设置父盒子
| 父盒子设置 | 居中的元素设置 |
|---|---|
| display: flex;(子元素会变为行内块) | / |
| justify-content: center;(主轴居中,默认是x轴,水平居中) | / |
| align-items: center;(副轴居中,默认是y轴,垂直居中) | / |
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
/* 设置了怪异盒模型后,不会默认高度和行高一样,一定要设置高度 */
height: 200px;
line-height: 200px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./微信图片_20190206120421.jpg" alt="">
</div>
</body>
</html>
(2)通过定位+transform(css3变形属性):
| 父盒子设置 | 居中的元素设置 |
|---|---|
| / | position: absolute; |
| position:relative;(子绝父相) | top:50%;left:50%; |
| / | transform: translate(-50%,-50%);(向左移动自身宽度的一半,向上移动自身高度的一半) |
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
/* 设置了怪异盒模型后,不会默认高度和行高一样,一定要设置高度 */
height: 200px;
line-height: 200px;
border: 1px solid red;
position:relative;
}
img {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./微信图片_20190206120421.jpg" alt="">
</div>
</body>
</html>
(3)通过定位+margin 负间距(宽高的一半);
| 父盒子设置 | 居中的元素设置 |
|---|---|
| / | position: absolute; |
| position:relative;(子绝父相) | top:50%;left:50%; |
| / | margin-left: 宽度的一半;margin-top: 高度的一半; |
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
/* 设置了怪异盒模型后,不会默认高度和行高一样,一定要设置高度 */
height: 200px;
line-height: 200px;
border: 1px solid red;
position:relative;
}
img {
position: absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./微信图片_20190206120421.jpg" alt="">
</div>
</body>
</html>
(4)上下左右均0位置定位+margin: auto;
| 父盒子设置 | 居中的元素设置 |
|---|---|
| / | position: absolute; |
| position:relative;(子绝父相) | left: 0; right: 0; top: 0; bottom: 0; |
| / | margin: auto; |
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
/* 设置了怪异盒模型后,不会默认高度和行高一样,一定要设置高度 */
height: 200px;
line-height: 200px;
border: 1px solid red;
position:relative;
}
img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./微信图片_20190206120421.jpg" alt="">
</div>
</body>
</html>
(5)table-cell 布局(实现垂直居中)+text-align:center(实现水平居中);
| 父盒子设置 | 居中的元素设置 |
|---|---|
| display: table-cell; | |
| vertical-align: middle; | vertical-align: middle; |
| text-align: center; |
划重点: A、IE6/7不支持; B、table-cell不支持margin属性（但支持padding）; C、尽量不要和浮动/定位同时用，会破坏它的css属性。
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
/* 设置了怪异盒模型后,不会默认高度和行高一样,一定要设置高度 */
height: 200px;
width: 200px;
line-height: 200px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
vertical-align: middle;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./微信图片_20190206120421.jpg" alt="">
</div>
</body>
</html>
3.块元素:与上面行内块元素一样有五种方法,前面四种一样
(1)-(4)省略,同上
(5)table-cell布局(实现垂直居中)+margin:0 auto(实现水平居中);
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
/* 设置了怪异盒模型后,不会默认高度和行高一样,一定要设置高度 */
height: 200px;
width: 200px;
line-height: 200px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
display: block;
margin: 0 auto;
vertical-align: middle;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./微信图片_20190206120421.jpg" alt="">
</div>
</body>
</html>
本文同步发表在我的个人博客：https://www.lubaojun.com/
