文章目录
重点知识：
- left、right、top、bottom：百分比 → 以父元素的宽高为标准
- calc(百分比表达式)：该属性是以什么为标准则以什么为标准
- translateX/Y(百分比)：以当前元素的宽高为标准
- vertical-align: middle → 当前元素的中心点对齐父元素文字的中部(即行高一半)
1. 子块级宽高度固定
1.1 设置：left=right=top=bottom=0
<head>
<style>
.a {
width: 500px;
height: 500px;
background: red;
position: relative;
}
.b {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
<style>
</head>
<body>
<div class="a">
<div class="b">
<div>
</div>
</body>
1.2 设置left、top居中，margin调整
<head>
<style>
.a {
width: 500px;
height: 500px;
background: red;
position: relative;
}
.b {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
<style>
</head>
<body>
<div class="a">
<div class="b">
<div>
</div>
</body>
1.3 使用CSS函数calc() → 计算居中值
<head>
<style>
.a {
width: 500px;
height: 500px;
background: red;
position: relative;
}
.b {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: calc( 50% - 100px );
top: calc( 50% - 100px );
}
<style>
</head>
<body>
<div class="a">
<div class="b">
<div>
</div>
</body>
1.4 设置：left、top居中，transfrom水平垂直平移
<head>
<style>
.a {
width: 500px;
height: 500px;
background: red;
position: relative;
}
.b {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
transfrom: translateX(-50%) translateY(-50%);
}
<style>
</head>
<body>
<div class="a">
<div class="b">
<div>
</div>
</body>
2. 子元素宽度、高度不固定
2.0 切记别使用1.1方法：导致子元素的宽高继承父元素
2.1 使用上述1.4的方法
2.2 父设: line-height、子设：vertical-align、行内块
<head>
<style>
.a {
width: 500px;
height: 500px;
line-height: 500px;
text-align: center;
border: 1px solid black;
}
.b {
width: 200px;
height: 200px;
background: green;
display: inline-block;
vertical-align: middle;
}
<style>
</head>
<body>
<div class="a">
<div class="b">
<span>各位观众们好！</span>
<div>
</div>
</body>
