共计 1339 个字符，预计需要花费 4 分钟才能阅读完成。
统一 HTML 代码：
<div class=”outer”>
<div class=”inner”></div>
</div>
相同的 css 代码抽取：
.inner{
width: 50px;
height: 50px;
background-color: aqua;
}
.outer{
border: 1px solid black;
}
①、margin:auto && 绝对定位
.inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.outer{
position: relative;
width:100px;
height: 100px;
}
注意点：①、absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。inner 设置了 absolute 定位，所以要在 outer 设置 relative，这样才能相对于 outer 进行相对定位，否则相对于 body 定位，因为默认是 static 定位。left、right 等不一定要设置为 0，只要 left 和 right 的值相等，即可实现水平居中。同理，top 和 bottom 的值相等，即可实现垂直居中。
②、margin 负值 && 相对定位
.inner{
position: relative;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* 外边距为自身宽高的一半 */
}
注意点：①、inner 元素要设为 relative②、margin 外边距为自身宽高的一半（负数）
③、CSS3 transform 属性
.inner{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意点：①、inner 元素要设为 relative②、transform 属性向元素应用 2D 或 3D 转换，translate(x,y) 定义 2D 转换
④、css flex 布局
.outer{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
最后在本文末尾还会提到 定位对于元素特征的改变 在介绍 css 元素居中方法之前，我们有必要认识一下元素的三种类型
html 元素有三种类型：
①、块状元素：如 div ——– display：block ②、内联元素：如 span ——display：inline ③、内联块元素：如 input —- display：inline-block
块状元素特征：(1)能够识别宽高 (2)margin 和 padding 的上下左右均对其有效(3) 可以自动换行 (4) 多个块状元素标签写在一起，默认排列方式为从上至下
行内元素特征：(1)设置宽高无效 (2) 对 margin 仅设置左右方向有效，上下无效；padding 设置上下左右都有效，即会撑大空间 在 IE7 的时候，padding-top 和 padding-bottom 无效 (3) 不会自动进行换行
行内块状元素特征：(1)不自动换行 (2) 能够识别宽高 (3) 默认排列方式为从左到右
在 position 设置为 fixed 或者 absolute 的时候，元素会脱离文档流 * 此时对于行内元素来说可以设置宽高
