元素水平垂直居中的方法

不知道元素宽高大小仍能实现水平垂直居中的方法
内联元素居中布局
块级元素居中布局

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

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