统一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的时候，元素会脱离文档流此时对于行内元素来说可以设置宽高