CSS如何让元素水平，竖直方向都居中？

第一种

原理：通过定位和调整matgin-top和margin-left的位置的方式调节。

	<style type="text/css">
		.demo{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			position: absolute;
			top:50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -100px;
		}
	</style>
	<div class="demo"></div> 

第二种

原理：把元素设置为绝对定位(absolute)后，该元素可以通left,right,top,bottom四个属性来决定其盒子模型的长宽度。当left,right,top,bottom都为0的时候，盒子模型的长宽就是视窗长宽。通过设置margin为auto会分配四个方向的空间达到居中效果。

	<style type="text/css">
		.demo{
			background-color: skyblue;
			position: absolute;
			width: 200px;
			height: 200px;
			margin: auto;
			left: 0;
			right: 0;
			top:0;
			bottom: 0;
		}
	</style>
	<div class="demo"></div> 

效果：

第三种

利用flex布局align-items(横向)和justify-content(纵向) 设置子元素位置

    <style>
    .wrap{
        width: 500px;
        height: 500px;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .item{
        width: 50%;
        height: 50%;
        background: rgb(247, 235, 68);
    }
    </style>
    <div class="wrap">
        <div class="item"></div>
    </div>