css居中

最近看了下css居中的方法，觉得还是得记录下来，将来一定有用到的地方，css居中分为3类，行内元素型居中，定宽块状元素居中，不定宽行内元素居中。

行内元素居中，只需在css样式中添加text-align：center;就行了

.inline{text-align: center;}

<p class="inline">行内元素</p>

定宽块状元素居中，只需在css样式中添加margin xxpx auto;就可以了，前面xxpx是指上下对其他xml标签的距离xx个像素，后面的auto是左右自动调节，xxpx可以随你喜欢填写大小，但是auto一定要是auto，这样才能自动调节

.width-block{border:1px solid red;width: 200px;margin: 20px auto;}

<p class="width-block">定宽块状元素</p>

不定宽块状元素居中有三种方式

第一种：给自己添加display:inline属性，使其成为行内元素，之后在父元素的css中添加text-align：center属性

.unwidth-block-inline{display: inline;}

.inline-container{text-align: center;}

	<div class="inline-container">
		<p class="unwidth-block-inline">不定宽块状元素inline类型</p>
	</div>

第二种：利用table使不定宽元素变成定宽元素，之后在父元素的css中添加margin xxpx auto属性

table{border:1px solid blue;margin: 20px auto;}

	<table>
		<tr>
			<td>
				<p class="unwidth-block-table">不定宽块状元素table类型</p>
			</td>
		</tr>
	</table>

第三种：利用position：relative与float属性进行居中，在父元素中设置左浮动50%，这时父与子元素的左边都在屏幕的中间线上，在子元素中设置relative与左浮动-50%，子元素的中间位置就会移动到屏幕的中间线上。

	.float-container{float: left;position: relative;left: 50%;border: 1px solid red;}
	.unwidth-block-float{left:-50%;position: relative;border: 1px solid blue;}

	<div class="float-container">
		<p class="unwidth-block-float">不定宽块状元素float类型</p>
	</div>

红框为父元素，蓝框为子元素，如果只设置父元素相对原来位置的左边50%，只是他的左边界线在中间线上，这时如果设置子元素相对左边-50%的话，就会使子元素的中间刚好中间线上