元素水平垂直居中的方法

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

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