一、块元素居中问题
块元素居中问题
1.由水平布局恒等式可以设置块元素水平居中。
2.由于没有垂直布局恒等式,所以无法设置居中。
1.1 设置块元素在父元素中水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
width:200px;
height:200px;
background-color: red;
}
width:50px;
height:50px;
background-color: blue;
/** 设置元素在父元素中水平居中*/
margin:0 auto;
}
</style>
</head>
<body>
<div id="b1">
<div id="b2"></div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4cf3e083dcc278b98f161a64c5d74c93.png)
二、设置绝对定位元素在父元素中居中
2.1 设置绝对定位元素在父元素中居中(绝对定位元素设置了宽高)
1)设置绝对定位元素在父元素中水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
width:200px;
height:200px;
background-color: red;
position:relative;
}
width:50px;
height:50px;
background-color: blue;
position:absolute;
/** 设置绝对定位元素在父元素中水平居中*/
left:0px;
right:0px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="b1">
<div id="b2"></div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/48d1bf08929f71f471222e452b3996ac.png)
2)设置绝对定位元素在父元素中垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
width:200px;
height:200px;
background-color: red;
position:relative;
}
width:50px;
height:50px;
background-color: blue;
position:absolute;
/** 设置绝对定位元素在父元素中垂直居中*/
top:0px;
bottom:0px;
margin:auto 0;
}
</style>
</head>
<body>
<div id="b1">
<div id="b2"></div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/06121e38b6dd36cdb1a7d794c7b632c2.png)
3)设置绝对定位元素在父元素中居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
width:200px;
height:200px;
background-color: red;
position:relative;
}
width:50px;
height:50px;
background-color: blue;
position:absolute;
/** 设置绝对定位元素在父元素中垂直居中*/
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto auto;
}
</style>
</head>
<body>
<div id="b1">
<div id="b2"></div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/33806012681b6c6311918d59f860099d.png)
2.2 设置绝对定位元素在父元素中居中(绝对定位元素没有设置宽高)
1)设置绝对定位元素水平居中(元素无固定宽高)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变形</title>
<style>
.d{
width:500px;
height:500px;
background-color: blue;
position: relative;
}
.box{
background-color: red;
position:absolute;
left:50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="d">
<div class="box">wewe</div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1c8373e035779b96287fda9461c26897.png)
2)设置绝对定位元素垂直居中(元素无固定宽高)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变形</title>
<style>
.d{
width:500px;
height:500px;
background-color: blue;
position: relative;
}
.box{
background-color: red;
position:absolute;
top:50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="d">
<div class="box">wewe</div>
</div>
</body>
</html>
3)设置绝对定位元素在父元素中居中(元素无固定宽高)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变形</title>
<style>
.d{
width:500px;
height:500px;
background-color: blue;
position: relative;
}
.box{
background-color: red;
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="d">
<div class="box">wewe</div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f00a3aee8fd155108af88cce2adcabee.png)
三、文字、行内元素、行内块元素、图片居中问题
2.1 设置【单行文字、行内元素、行内块元素、图片】水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
width:200px;
height:200px;
background-color: pink;
/** 设置元素水平居中 */
text-align:center;
}
background-color: blue;
}
</style>
</head>
<body>
<div id="b1">
<span id="b2">xxxxxxxx</span>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/94530017abcbb9ebe084cae1c44e8ce3.png)
2.2 设置【单行文字、行内元素、行内块元素、图片】垂直居中
>>>>>> 方式一:使用vertical-align来设置垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
width:200px;
height:200px;
background-color: pink;
/** 设置元素垂直居中 */
display: table-cell;
vertical-align: middle;
}
background-color: blue;
}
</style>
</head>
<body>
<div id="b1">
<span id="b2">xxxxxxxx</span>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c747609fad9694b3712f39ee941eb396.png)
>>>>>> 方式二:使用line-height来设置垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
width:200px;
height:200px;
background-color: pink;
line-height: 200px;;
}
width:50px;
height:50px;
background-color: blue;
margin:0 auto;
}
</style>
</head>
<body>
<div id="b1">
<span id="b2">xxxxx</span>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6e44840e2d7a09b074a1ac0ddd071da5.png)
2.3 设置【单行文字、行内元素、行内块元素、图片】居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
width:200px;
height:200px;
background-color: pink;
/** 设置元素垂直居中 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
background-color: blue;
}
</style>
</head>
<body>
<div id="b1">
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" width="50px" height="50px">
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9a34cc6f3135ad95756ef6fe59da5960.png)