css盒子居中

0.CSS的居中方式

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中

1.上下左右居中

div {
   
position:fixed;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
width:200px;
height:150px;
}

2.左右居中

如果只需要左右居中，那么把 bottom:0; 或者 top:0; 删掉即可

3.上下居中

如果只需要上下居中，那么把 left:0; 或者 right:0; 即可

4.水平居中

1.行内元素(文本txt，图片img)

text-align:center;

2.块级元素居中

1.确定宽度的块级元素

01.(已知块状元素的width且width为固定值)

.content{
   
	width:200px;
	height:200px;
	margin:0 auto;
}

02.方法二:绝对定位和margin-left: -(宽度值/2)实现水平居中

.content{
   
	width:200px;
	height:200px