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

文章目录

- css 实现垂直水平居中
- 实现方式
- 利用定位+margin：auto
- 利用定位+margin：负值
- 利用定位+transform
- table布局
- flex布局
- grid网格布局
- 小结
- 有需要的请私信博主，还请麻烦给个关注，博主不定期更新组件封装和文章编写，或许能够有所帮助！！请关注公众号

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>