css中div三种水平居中方法【最常见】

基础样式

<div id="dad">
<div id="son></div>
</div>

<style>
#dad{
	width :400px;
	height；200px；
	border：3px solid green;
	margin:30px auto;
}

#son{
width:100pcx;
height:100px;
background:purple;
}
</style>

第一种：子元素使用margin属性

加上一句
#son{
	margin：0 auto;//子元素水平居中，但是用margin属性容易影响其他div
}

第二种【最常用】：定位

#dad{
	width :400px;
	height；200px；
	border：3px solid green;
	margin:30px auto;
	position：relative；//在父级div上加入relative定位
}

#son{
width:100pcx;
height:100px;
background:purple;
position;absolute;//在子级div上加上absolute定位
left：50%;//子元素左上角移动到父级元素宽度的50%处
margin-left:-50px;//子盒子向左移动自身宽度的一半（100px盒子宽度），此时水平居中

第三种;flex-box 弹性盒子，只需要作用在父级元素即可

#dad{
	width :400px;
	height；200px；
	border：3px solid green;
	margin:30px auto;
	display：flex;//先让它变为弹性盒子
	justify-content:center;//设置水平居中
	
}