元素水平垂直居中的方法有哪些?

css 实现垂直水平居中

实现方式

• 利用定位＋margin：auto
• 利用定位＋margin：负值
• 利用定位+transform
• table布局
• flex布局
• grid布局

利用定位+margin：auto

利用定位+margin：负值

	<style>
	.father {
		position: relative;                           
		width: 200px;	
		height: 200px;
		background: skyblue;	
	}		
	.son {
		top: 50%;
		left: 50%;
		margin-left:-50px;
		margin-top:-50px;
		width: 100px;
		height: 100px;
		background: red;
	}
</style>
		<div class="father">
			<div class="son"></div>
		</div>

初始位置为方块1的位置
当设置left 、top为50%的时候 ， 内部子元素为方块2的位置
设置margin为负数时 ， 使内部子元素到方块3的位置 ， 即中间位置
这种方案不要求父元素的高度 ，也就是即使父元素的高度变化了 ，仍然可以保持在父元素的垂直居中位
置 ，水平方向上是-样的操作
但是该方案需要知道子元素自身的宽高 ，但是我们可以通过下面 transform 属性进行移动

利用定位+transform

<style>
	.father {
		position: relative;                           
		width: 200px;	
		height: 200px;
		background: skyblue;	
	}		
	.son {
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100px;
		height: 100px;
		background: red;
	}
</style>
		<div class="father">
			<div class="son"></div>
		</div>

table布局

	<style>
	.father {
		display: table-cell;                           
		width: 200px;	
		height: 200px;
		background: skyblue;	
		vertical-align: middle;		
		text-align: center;
		}	
	.son {
		display: inline-block;
		width: 100px;
		height: 100px;
		background: red;
		}	
</style>
	<div class="father">
		<div class="son"></div>
	</div>

flex布局

1  <style>
2		.father {
3           display: flex;                                
4           justify-content: center;	
5           align-items: center;
6           width: 200px;	
7           height: 200px;		
8           background: skyblue;
9       }	
10      .son {
11          width: 100px;
12           height: 100px;
13           background: red;
14       }	
15   </style> 
16  <div class="father">
17       <div class="son"></div>
18   </div>

css3 中了 flex 布局， 可以非常简单实现垂直水平居中
这里可以简单看看 flex 布局的关键属性作用：
display： flex时 ， 表示该容器内部的元素将按照flex进行布局
align-items: center表示这些元素将相对于本容器水平居中
• justify-content: center也是同样的道理垂直居中

grid网格布局

1   <style>
2       .father {

 - List item

3               display: grid;
4               align-items:center;
5               justify-content: center;
6               width: 200px;
7               height: 200px;
8               background: skyblue;
9
10           }
11            .son {
12              width: 10px;
13               height: 10px;
14               border: 1px solid red
15           }
16   </style>
17   <div class="father">
18       <div class="son"></div>
19   </div>

小结

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

• 利用定位＋margin：auto
• 利用定位＋transform
• flex布局
• grid布局

有需要的请私信博主，还请麻烦给个关注，博主不定期更新组件封装和文章编写，或许能够有所帮助！！请关注公众号