如何居中一个元素

一、水平居中

1、行内元素水平居中

（1）方法：text-align:center;
（2）效果：可以实现在块级元素内部的行内元素水平居中

.parent{  //在父容器设置
	text-align:center;
}

（3）如果块级元素内部也是一个块级元素，可以先把内部的块级元素改变为行内块元素

<div class="parent">
	<div class="child">Demo</div>
</div>
<style>
	.parent{
		text-align: center;
	}
	.child{
		display: inline-block;
	}
</style>

2、块级元素的水平居中

（1）方法一：子元素左右的margin值设为auto

.child{
	width：100px;
	margin:0 auto;
}

（2）方法二：父元素设置相对定位，再将子元素设置为绝对定位

<div class="parent">
	<div class="child">Demo</div>
</div>
<style>
	.parent{
		position: relative;
	}
	.child{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
</style>

（2）方法三：flex+margin

<div class="parent">
	<div class="child">Demo</div>
</div>
<style>
	.parent{
		display:flex;
	}
	.child{
		margin:0 auto;
	}
</style>

3、多块级元素的水平居中

（1）方法一：flex布局

.parent{  //在父容器设置
	display:flex;
	justify-content:center;
}

（2）方法二：inline-block

.parent{
	text-align:center;
}
.child{
	display:inline-blcok;
}

4、浮动元素水平居中
（待续）