同样的css代码提取：.内{宽度：50px;高度：50px；background-color:aqua;}.outer{border:1pxsolidblack;}①,margin:auto&&absolutepositioning.inner{position:absolute;左：0；右：0；顶部：0；底部：0；边距：自动；}.outer{位置：相对；宽度：100px；height:100px;}注意事项：①.absolute生成绝对定位的元素，相对于静态定位以外的第一个父元素进行定位。inner设置为绝对定位，所以设置为relativetoouter，这样可以相对于outer进行相对定位，否则相对于body定位，因为默认是静态定位。left、right等不必设置为0，只要left和right的值相等即可实现水平居中。同样，如果top和bottom的值相等，也可以实现垂直居中。②margin负值&&relativepositioning.inner{position:relative;顶部：50%；左：50%；边距：-25px00-25px；①、inner元素要设置为relative②、margin要为自身宽高的一半（负数）③、CSS3transformproperty.inner{position:relative;顶部：50%；左：50%；transform:translate(-50%,-50%);}注意事项：①、内部元素要设置为relative②、transform属性对元素进行2D或3D变换，translate(x,y)定义2D改造④、css3flexlayout.outer{display:flex;对齐项目：居中；/*垂直居中*/justify-content:center;/*水平居中*/}只有水平居中的方法①,margin:0auto.inner{margin:0auto;}②,text-align:center.outer{text-align:center;}.inner{display:inline-block;}最后，本文最后还会提到定位改变元素的特性。在介绍css元素居中方法之前，我们需要了解三种元素html元素分为三种：①、块元素：如div--------显示：块②、内联元素：如span------display:inline③,inner块元素：如input----display:inline-block块元素特点：（1）可以识别宽高（2）margin和padding都有效上下左右(3)可以自动换行(4)多个两个块元素标签写在一起，默认排列是从上到下。元素特性：（1）设置宽高无效（2）margin只设置左右方向有效，上下无效；设置paddingup,down,left,andright有效，就是会扩大空间。在IE7中，padding-top和padding-bottom无效（3）不会自动换行。行内块元素特点：（1）不自动换行（2）可以识别宽高（3）默认排列是从左到右。当位置设置为固定或绝对时，元素将脱离文档流。*此时可以为行内元素设置宽高