基本样式horizo??ntalcenter1-inlineelement(最简单的text-align:center).outer{text-align:center;}1-block-levelelement(margin:auto)当使用这个方法，内部元素必须定义宽度，否则边距属性将无效。outer.inner{margin:auto;}2块级元素(margin:auto+display:table)前面的方法需要为inner元素定义宽度。如果不想定义宽度，可以将内部元素的显示设置为table，其宽度会被内部元素扩大。.outer.inner{边距：自动；display:table;}3-block-levelelements(display:inline)将内部元素的显示设置为inline，将其转化为inline元素，然后在父元素上使用text-align:center实现水平居中，缺点是内部元素不能设置宽度。.outer{text-align:center;}.outer.inner{display:inline;}4-block-levelelements(display:inline-block)Option3不能为内部元素设置宽度，但是使用inline-block，可以设置宽度内部元素设置宽度。.outer{text-align:center;}.outer.inner{display:inline-block;}5-block-levelelements(float:left+transform)这个方法不需要知道内部元素的宽度。.outer.inner{位置：相对；左：50%；transform:translateX(-50%);}6-block-levelelements(negativemargin+absolutepositioning).outer{position:relative;}.outer.inner{position:absolute;左：50%；margin-left:-25px;}7-块级元素（flexbox）使用最多，但低版本浏览器会有兼容性问题。外{显示：flex;证明内容：居中；//以主轴为中心}垂直居中1-行内元素(line-height)外部元素设置line-height.outer{line-height:400px;}1-块级元素(absolute+top+margin-top)使用绝对定位将内部元素的top定位在中间，然后通过margin-top负值拉回高度。需要提前知道内层元素的高度。outer{position:relative;}.outer.inner{position:absolute;顶部：50%；margin-top:-25px;}2-block-levelelements(absolute+margin:auto)这种方法不需要知道内部元素的高度，兼容性也很好outer{position:relative;}.outer.inner{位置：绝对；顶部：0；底部：0；左：0；右：0；margin:auto;}3块级元素（relative+transform）在前面水平居中的时候也是这样出现的，同样可以使用position:absolute方法，但是设置外层元素为位置：relative.outer.inner{位置：相对;顶部：50%；transform:translateY(-50%);}4块级元素element(vertical-align+table-cell).outer{display:table-cell;vertical-align:middle;}5块级元素（vertical-align+inline-block）原理是新建一个inner的兄弟元素，height打开整个容器，然后在inner上使用vertical-align:middle在不知道内部元素高度的情况下使元素居中。HTML结构