1.已知大盒子的宽高,不确定(就是在改需求的时候直接改小盒子的宽高,不需要修改其他的代码)小盒子宽高,小盒子在大盒子垂直水平居中的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 让一个小盒子在一个大盒子里面垂直水平居中:
已知小盒子宽高的情况下设方法一,
方法一:给小盒子设置margin:0 auto,还要给父元素(大盒子)设置padding-top:
在不知道小盒子的宽高的时候:
在小盒子的后面添加标签,高度为大盒子的高度,宽度为0,并且设置display:inline-block
,然后给小盒子设置display:inline-block;
分别给他们两都是设置vertical-align:middle(垂直的居中对齐)
水平居中:给大盒子设置text-align:center;
*/
.box{
width: 400px;height: 400px;
border: 1px solid red;
/* padding-top: 100px; */
text-align: center;
}
.box1{
width: 220px;height: 220px;background: #ccc;
/* 水平居中 */
/* margin: 100px auto; */
display: inline-block;
vertical-align: middle;
}
.box2{
display: inline-block;
height: 400px;
vertical-align: middle;
background: #111;
width: 0px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
2.已知小盒子宽高,不确定大盒子宽高,让小盒子垂直水平居中在大盒子中。(这里采用定位方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 在父元素的宽高不确定的情况下,我们怎么让盒子居中 */
.box {
width: 600px;
height: 600px;
border: 1px solid red;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background: #ccc;
position: absolute;
/* 50% == 250px(父盒子的宽度的50%) */
left: 50%;
top: 50%;
/* margin-left:-100px(小盒子宽度的一半) */
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
3.2D转化方式实现不确定大盒子宽高,确定小子宽高,小盒子水平垂直居中
<!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;
}
.box {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box2 {
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-100px, -100px);
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
4.2D转化方式实现小盒子在大盒子中水平垂直居中
<!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;
}
.box {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box1 {
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
5.用弹性盒知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
/* */
justify-content: center;
/* 4.align-items 侧轴对齐方式(单行)
取值:(1)flex-start 顶端对齐
(2)flex-end 末端对齐
(3)center 居中对齐
(4)baseline 基线对齐
*/
align-items: center;
}
.box1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>