css居中

1、flex实现div  

#wrap设定高度重的垂直居中

<style>
		.wrapper{
			display: flex;
			justify-content:center;
			/*flex-start | flex-end | center | space-between | space-around;*/
			align-items:center;
			height:300px;
		}
		.item{
			background:red;	
			height:30px;
			width:50px;
		}
</style>

<div class="wrapper">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>

2、绝对定位+transform

<style>
		.wrap{
			position: absolute;
			left:50%;
			top:50%;
			transform:translate(-50%,-50%);
		}
	</style>

<div class="wrap">
		ssssssss
	</div>

3、绝对定位

绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。

	<style>
		.wrap{
			position: absolute;
			height:200px;
			width:200px;
			top:0;
			left:0;
			bottom:0;
			right:0;
			margin:auto;
			background: red;
			overflow: scroll;
			resize: both;
		}
	</style>

<div class="wrap">
		生命里有着多少的无奈和惋惜,又有着怎样的愁苦和感伤?
雨浸风蚀的落寞与苍楚一定是水,静静地流过青春奋斗的日子和触摸理想的岁月。
	</div>

4、line-height

只适合单行文本

 <div class="single_line">
                其实我们每个人的生活都是一个世界，即使最平凡的人也要为他生活的那个世界而奋斗。
            </div>

  .single_line{
                  height: 30px;
                  font-size: 14px;
                  line-height: 30px;
                  border: 1px solid #518dca;
            }