盒子居中的方法

【方法1】margin值

必须知道两个盒子的宽高，用大盒子的宽度减去小盒子的宽度在除2，再用margin-top,margin-left进行移动

【方法2】当小盒子宽高不固定的时候实现盒子的居中

水平居中：把小盒子设置为行内块元素（inline-block ( 行内块元素 )），父元素设置text-align:center;

垂直居中：当两个元素在同一行显示，这两个元素高度不一样，这两个元素垂直对齐默认基线对齐，垂直居中对齐用vertical-align属性，注意：两个元素都需要设置vertical-align属性，vertical-align属性的取值为{vertical-align:top（顶部对齐）/bottom（底部对齐）/middle（垂直对齐）;}。两个元素设置的值不一样，根据最后一个元素设置来进行对齐，所以两个元素都设置vertical-align属性，如果只给一个元素设置vertical-align属性，另一个元素默认对齐方式为基线对齐 。

 

 【方法3】利用定位--设置为本身大小的50%，margin-本身:负自己大小的一半；

1、绝对定位

2、 固定定位 和绝对定位的效果一样，固定定位定位时也会脱离文档流，所以margin不是使用

div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}

 3、用父相子绝

水平居中：left:50%;(相对于父元素的宽度来取50%),transform:translateX(-50%);（相对于自己的宽度来取50%）；也可用margin-left:-50%;

垂直居中：top:50%;(相对于父元素的高度来取50%),transform:translateY(-50%);（相对于自己的宽高度来取50%）；也可用margin-top:-50%;

说明：

transform：translateX（）translateY（）；

translateX（）表示让元素X轴（水平方向）进行移动，正值往右移动，负值往左移动

translateY（）表示让元素Y轴（垂直方向）进行移动，正值往下移动，负值往上移动