元素水平垂直居中的方法
不知道元素宽高大小仍能实现水平垂直居中的方法
- 利用定位+margin:auto
- 利用定位+transform
- flex弹性布局
- grid网格布局
利用定位+margin:auto
css
<style>
.father{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.son{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
html
</style>
<div class="father">
<div class="son"></div>
</div>利用定位+transform
css
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}
</style>
html
<div class="father">
<div class="son"></div>
</div>flex弹性布局
css
<style>
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}
</style>
html
<div class="father">
<div class="son"></div>
</div>grid网格布局
css
<style>
.father {
display: grid;
align-items:center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red
}
</style>
html
<div class="father">
<div class="son"></div>
</div>内联元素居中布局
水平居中
- 行内元素可设置：text-align: center
- flex布局设置父元素：display: flex; justify-content: center
垂直居中
- 单行⽂本父元素确认⾼度：height === line-height
- 多行⽂本父元素确认⾼度：display: table-cell; vertical-align: middle
块级元素居中布局
水平居中
- 定宽: margin: 0 auto
- 绝对定位+left:50%+margin:负自身⼀半
垂直居中
- position: absolute设置left、top、margin-left、margin-top(定高)
- display: table-cell
- transform: translate(x, y)
- flex(不定高，不定宽)
- grid(不定高，不定宽)，兼容性相对⽐较差