元素水平居中和垂直居中的方法

元素水平居中：

　　1. 行内元素（如文本、图片等 display 为 inline 或 inline-block）

　　　　给其父元素设置 text-align: center

　　2. 块元素（width 为定值）

　　　　通过设置 margin: auto; （此方法对浮动元素或绝对定位元素无效）

　　3. 块元素做绝对定位，然后设置 { left: 0; right: 0; top: 0; bottom: 0;margin: auto }, 来实现水平垂直都居中，对于行内元素无法设置，因为margin-top 和 margin-bottom 对于行内元素不起作用；

　　4. 通过 display:flex 实现水平居中

　　　　给父元素设置 { display: flex; flex-direction: column; }，而子元素｛align-self: center;｝

　　　　或者给父元素设置 { display: flex; justify-content: center; }

　　　　还可以给父元素设置 { display: flex; }，而子元素｛margin: 0 auto;｝

　　5. 通过 width:fit-content 实现水平居中 

　　　　子元素宽度不确定的情况下设置｛ width: fit-content; margin: 0 auto; text-align: center; ｝（fit-content 是 css3 新属性，目前只支持谷歌和火狐）

　　6. 通过 display: table + margin: 0 auto

　　　　给子元素设置 ｛display: table; margin: 0 auto;｝子元素不设宽时，由内容撑开

　　7. 通过 display: table-cell + text-align: center; + display: inline-block

　　　　给父元素设置 { display: table-cell; text-align: center; }，而子元素｛display: inline-block;｝(此方法与 float: left; 和 position: absolute; 一起使用会有影响。)

　　　　设置了 display: table-cell; 的元素对宽高很敏感，对 margin 值无反应，响应 padding 值，表现的和 td 标签一样。

　　　　

元素垂直居中：

　　1. 通过 line-height 实现

　　　　设置子元素的 line-height = 父元素的 height（适用于子元素为单行文本的情况）

　　　　多行文本垂直居中，父元素｛display: table;｝，子元素｛display: table-cell; vertical-align: middle;｝

　　2. 通过 verticle-align:middle 实现

　　　　verticle-align 生效的前提是元素 display：inline-block

　　　　或者父元素设置｛display: table-cell; vertical-align: middle;｝

　　3. 通过 display:flex 实现

　　　　父元素｛display: flex;｝而子元素｛align-self: center;｝

　　　　或者父元素｛display: flex; align-items: center;｝

　　4. 通过伪元素 :before 实现

　　　　父元素设置outer:after { content: ’’; display: inline-block; vertical-align: middle; height: 100%; }

　　　　子元素｛display: inline-block; verticle-align: middle; ｝

　　5. 已知父元素高度通过 transform 实现

　　　　设置｛ positive: relative; top: 50%; transform: translateY(-50%); ｝

　　6. 未知父元素高度通过 transform 实现

　　　　父元素｛position: relative; ｝子元素｛ positive: absolute; top: 50%; transform: translateY(-50%); ｝

 

元素水平方向和垂直方向同时居中： 

　　1. 通过定位 + transform 实现

　　　　父元素｛position: relative;｝子元素｛positive: absolute; top: 50%; transform: translate(-50%,  -50%);｝

　　　　或者在知道子元素宽高的情况下，给子元素设置负的 margin 值（其绝对值为子元素宽高的一半）居中

　　2. 父元素设置 { display: table-cell; text-align: center; vertical-align: middle; } 子元素 { display: inline-block; }

　　3. 父元素设置 { display: flex; justify-content: center; align-items: center; }