内敛元素、块元素、内敛块元素水平居中和垂直居中

1.行内元素或行内块元素设置水平居中用 text-align

2.margin：0 auto； 是对于块元素而言

使用flex布局实现垂直居中

在父级元素中使用flex布局，里面的子元素就会垂直居中

<div class="a">
	<div class="b"></div>
</div>
.a{
	 width: 200px;
	 height: 200px;
	 border: 1px solid blue;
	 display: flex;
	 align-items: center;
	 justify-content: center;
 }
 .b{
	 width: 100px;
	 height: 100px;
	 background: red;
 }

内联元素（行内元素）

元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会换行，其宽度随元素内容的变化而变化。

<div class="hang">
		<span>小威</span>
</div>

水平居中

直接给父级定义：text-align 即可实现文本水平居中

.hang{
		background-color: #ccc;
		width: 200px;
		height: 200px;
		text-align: center;
	}

垂直居中

1.设置父级的行高=高度即可

line-height: 200px;

块元素

元素会独占一行

<div class="kuaiFu">
	<div class="kuai"></div>
</div>

垂直居中

1. (父级高低–子级高度)/2==设置头部内边距，使用内边距时需使用box- sizing配合使用

2. 给子级设置：margin：0 auto；

.one{
		background-color: #000; //设置背景
		width: 600px;
		height: 600px;
		padding-top: 200px;
		box-sizing: border-box;
	}
.two{
		background-color: #fff;
		width: 200px;
		height: 200px;
		margin: 0 auto;
	}

内敛块元素（行内块元素）

元素不会单独占一行，但是本身自带间隙

<div class="hangNeiKuaiFu">
	<div class="hangNeiKuai"></div>
</div>

垂直居中
1. 让父级的行高=高度，然后设置 text-align
2. 子级设置成 vertical-align：middle 和父级的行高配合使用

.hangNeiKuaiFu{
		background-color: red; //设置一个红色背景
		width: 600px;
		height: 600px;
		text-align:center;
		line-height: 600px;	
	}
.hangNeiKuai{
		width: 200px;
		height: 200px;
		background-color: #fff;
		display: inline-block;
		vertical-align: middle;
	}