元素水平垂直居中的方法

不知道元素宽高大小仍能实现水平垂直居中的方法

• 利用定位+margin:auto
• 利用定位+transform
• flex弹性布局
• grid网格布局

利用定位+margin:auto

<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>

</style>
<div class="father"><div class="son"></div>
</div>

利用定位+transform

<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>

<div class="father"><div class="son"></div>
</div>

flex弹性布局

<style>
.father {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: skyblue;
}
.son {width: 100px;height: 100px;background: red;
}
</style>

<div class="father"><div class="son"></div>
</div>

grid网格布局

<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>

<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(不定高，不定宽)，兼容性相对⽐较差