如何实现盒子居中？

如下图所示，初始化一个盒子，默认左上方对齐，如何实现在不设置margin的前提下让盒子居中？

只需两个使用css属性即可实现

属性1:绝对定位

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位使“相对于”元素在html中的初识位置进行偏移，而绝对定位使“相对于”最近的已定位祖先元素进行偏移，如果不存在已定位的祖先元素，那么“相对于”最初的包含块进行偏移。
简而言之，相对定位以自己为参考，偏移量看自己原来的位置，无论是否移动，元素依然占据原来的位置空间，因此移动会导致它覆盖其他元素，类似浮动；而决定定位一般看父元素，也就是看最近一级父元素是否设定了定位，如果没有就往上找，如果一直都没有，那么就会以浏览器的可视窗口作为参照进行偏移。因此就有了“子绝父相”这一口诀，父元素或祖先元素是相对定位，子元素是绝对定位。

属性2：transfrom

transform字面的意思就是变形的意思，在CSS3中，transform支持几个操作有：

1. 旋转rotate
2. 扭曲skew
3. 缩放scale
4. 移动translate
5. 矩阵变形matrix

1.rotate(xx deg)(2D), rotateX()(3D), rotateY()(3D)：以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。

2.translate(x,y) ，translateX(x) ，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移。

3.scale(x,y)，scaleX(x,1)， scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。

4.skew(x,y)， skewX(x)， skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。
这里我们使用tranlate(x, y)

代码与效果展示