css实现居中

要考虑布局场景，有些并不适合复杂布局，主要实现垂直居中，水平居中会带一下

1、height配合line-height

/*父标签*/
.parent{
	height:320px;
	line-height:320px;
}

应用场景：子标签一行文字内容，或者多行文字line-height也为320px（这个一般文字间距不会这么高）;对图片无效。

2、vertical-align:middle

/*父标签*/
.parent{
   height:320px;
}
/*子标签*/
.child{
   vertical-align:middle;
}

应用场景：子标签为图片，图片垂直居中；或者同级一行显示的图片和文字对齐则只需设置img vertical-align:middle

3、display:table-cell

/*父标签*/
.parent{
	display:table-cell;//使用中会存在宽度不能百分比、子标签高度超过父标签overflow无效、兼容性等问题
	vertical-align:middle;
	height:320px;
}

4、display:table（不可以和float:left配合使用）

/*父标签*/
.parent{
	display:table;
	height:320px;
}
/*子标签*/
.child{
	display:table-cell;
	vertical-align:middle;
}

应用场景：子标签元素不定，内容高度不定。

5、position定位

公共样式

/*父标签*/
.parent{
	position:relative
	height:320px;
}

A、简单常用处理方法

/*子标签*/
.child{
	position:absolut;
	top:0;
	bottom:0;
	margin: auto;
	//水平居中
	left:0;
	right:0;
}

B、配合负边距

.child{
	position:absolut;
	//垂直居中
	top:50%;
	margin-top:-50%;
	//水平居中
	left:50%;
	margin-left:-50%;
}

C、配合transform

.child{
	position:absolut;(这个可以不用设，父标签也不需要relative，不过专业点一般我们都会设置上)
	top:50%;
	transform: translateY(-50%); 
	//水平居中
	left:50%;
	transform: translateX(-50%); //可以和上面的合并transform: translate(-50%，-50%); 
}

后两个稍微复杂一点，但功能也是强大的，比较适合内容为多行、宽高不定、文字居左、整体水平垂直居中，用left:0,right:0,或者top:0,bottom:0配合margin:auto不能完美解决，实现不出效果或者高度100%啦，使用fix-content可以解决，但存在兼容性

6、flex布局

/*父标签*/
.parent{
	display:flex;
	height:320px;
	align-items: center;
	justify-content: center;/*水平居中，因为这里text-align:center无效所以提醒下*/
}

7、display:inline-block和vertical-align:middle配合

/*结构*/
<div class="parent1">
	<img src="">
</div>
<div class="parent2">
	<h1>视觉</h1>
	<div>将IP符号、IP内容、IP情感和价值观视觉化，过目不忘，直指人心。</div>
</div>
/*sass*/
.parent1{
	display:inline-block;
	img{
		vertical-align:middle;
   }
}
.parent2{
	display:inline-block;
	vertical-align:middle;
}

应用场景：内容高度不定，右边（左边）内容随左边（右边）自适应图片的高度垂直居中，可能有更专业的解决方法，欢迎留言。