1.盒子内部文本的水平居中

①对盒子使用css：text-align：center，可以使盒子内部文本-行内元素相对于盒子居中。

css必须写在父级块状元素中，写在行内元素中不起作用。

②使用html的属性：align：center，同样写在其父级块级元素中，写在其本身行内元素不起作用。

③内部的文本-行内元素通过display：block/inline-block转为块级元素处理。

（块级元素居中处理见下文）

2.盒子内部文本的垂直居中

情况一：单行文本的垂直居中

height和line-height设置一样的高度可实现单行文本的垂直居中。

		h1{
				margin: 0;
				padding: 0;
				border: 1px solid red;
				width: 200px;
				height: 200px;
				line-height: 200px;
			}

情况二：不固定高度的多行文本的垂直居中

不给元素设置高度height，仅仅使用padding将其撑起来。

h1{
				margin: 0;
				padding: 0;
				border: 1px solid red;
				width: 200px;
				padding: 50px;
				/* 没有height，padding把元素撑起来*/
			}

情况三：固定高度的多行文本的垂直居中

利用display：table和属性vertical-align

		<div id="box5">
			<h4>开始哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈结束</h4>
		</div>

#box5{
				width: 500px;
				height: 500px;
				margin: 0 auto;
				border: 1px solid red;
				display: table;
				/* 使得元素变成块级表元素，其子元素必须为table-cell */
				/* 即使书写 text-align: center;该行代码不会使子元素h4水平居中，因为h4是块级元素，而text-align只针对父元素下的行内元素生效*/
				
			}
#box5 h4{
				border: 1px solid blue;
				background-color: #CCCCCC;
				display: table-cell;
				vertical-align: middle;
				/vertical-align属性以上实现垂直居中 */
				padding: 50px;
				/*未设置元素宽度，padding撑开实现水平居中 */
				
			}

3.盒子本身的水平居中

盒子的css最常使用margin:0 auto;

前提是需要给定盒子宽度width，该居中是相对于上一级盒子来说的。

4.盒子在另一个盒子中实现的水平居中和垂直居中

方法一：利用定位的知识。

距离左边50%减去盒子本身的1/2，距离上边50%减去盒子本身的1/2。

		<div id="box1">
			<span id="">
				
			</span>
		</div>
		

#box1{
				width:200px;
				height:200px ;
				border: 2px solid #ccc;
				position: relative; 
				
			}
#box1 span{
				display: block;//将span文本元素变为可以设置宽高的块级盒子
				width: 50px;
				height: 50px;
				background-color: pink;
			    position: relative;
				top:50%;
				left: 50%;
				margin-top: -25px;
				margin-left: -25px; 
			}

方法二：利用flex布局的知识,html结构同方法一。

#box1{
				width:200px;
				height:200px ;
				border: 2px solid #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
			}
#box1 span{
				display: block;
				width: 50px;
				height: 50px;
				background-color: pink;
			}

方法三：块级元素没有固定高度宽度的情况使用CSS3的2D动画

可以发现以上的居中我们均设置了盒子的宽高，如果盒子没有宽高，则可以利用2D动画里的tansform方法。

<div id="box7">
			块级不固定
</div>

#box7{
				padding: 20px;
                /*由于盒子没有宽高，可以使用padding撑起来实现其内部文本的水平垂直居中*/
				background-color: skyblue;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
                /*实现box在body中的水平与垂直居中*/
			}