垂直居中、水平居中、移动盒子

一、移动盒子的方法:

• 定位
• 内外边距
• 2D转换transform：translate

二、让盒子垂直居中的方法：

1、利用position：absolute/relative/fixed;配合相应算法

position:absolute;

top:50%;
left:50%;

margin-left:-Xpx(X为盒子自身的一半)；

margin-left:-Ypx(Y为盒子自身的一半)；

2、利用2D转换移动让盒子水平居中的方法：

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

说明：transform:translate(-50%,-50%);利用2d转换去移动盒子的位置在x/y轴上移动自身位置的一半向x/y轴；

3、利用margin-left/right/top/bottom去挤开盒子

4、利用弹性盒子去布局Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

三 、让盒子水平居中：

1、最简单的margin:0 auto;
2、将盒子转为行内块元素（必要），然后使用text-align:center属性水平居中