CSS居中实现

 ## 1不使用定位实现居中
 ## 1.1行内块级元素的居中【水平方向】
	对行内块级元素的父元素添加text-align:center属性
	因为inline-block带有inline属性，可以实现居中

<style type="text/css">
			div{
				display: 400px;
				height: 400px;
				background-color: salmon;
				text-align: center;
			}
</style>
<div><img src="../img/1b49f153650d9d22daa8c9a3f81648d0.jpeg" alt=""></div>

## 标题1.2块级元素的居中

div{
				width: 100px;
				height: 100px;
				background-color: aqua;
				 margin-left: auto;margin-right: auto;//水平
				//	margin-top: auto;margin-bottom: auto;垂直
	}

<div>
			xxx
</div>

## 标题1.3内部元素用边距撑开父元素，是另一种居中的实现

使用定位实现居中

  定位实现居中方法多种多样

标题前提父元素无定位

简单的  水平方向居中
position: absolute;
			width: 50px;
			height: 50px;
			left:0px;
			right:0px;
			margin:  auto;    
-------------------------------------------
简单的垂直方向居中 
position: absolute;
					width: 100px;
					height: 100px;
					background: #f0f0f0;
					top: 0;
					bottom: 0;
					margin:auto; 
-----------------------------------------------------
有点复杂！
百分比空间内居中【无法使用固定像素进行定位】
html,body{
				width: 100%;
				height: 100%;
			}
			.box{
				text-align: center;
				position: relative;
				height: 100%;
				width: 100%;
				background-color: salmon;
			}
			span{
				position:absolute;
				margin: auto;
				font-size: 12px;
				top:50%;
				margin-top:-6px;//减去当前元素一半  竖直方向
				//水平方向使用text-align:center
				//text-align：center  对绝对定位元素是失效的
				//为什么可以实现水平居中呢？************************************
				//在剧中的过程中，margin:auto 到底做了什么呢？
			}
			
			<div class="box">
			<span>
				xxxx
			</span>
		</div>
			--------------------------------------------------------------
			

先到这里