方法1-
transform
translateX
/translateY
：
在受支持的浏览器（大多数）中，可以将
top: 50%/
left:50%与组合使用，
translateX(-50%) translateY(-50%)以动态垂直/水平居中元素。
.container { position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);}<div > <span>I'm vertically/horizontally centered!</span></div>方法2-Flexbox方法：
在支持的浏览器中，将
display目标元素的设置为
flex并
align-items: center用于垂直居中和
justify-content:center水平居中。只是不要忘记为其他浏览器支持添加供应商前缀。
html, body, .container { height: 100%;}.container { display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-content: center;}<div > <span>I'm vertically/horizontally centered!</span></div>方法3-
table-cell
/vertical-align: middle
：
在某些情况下，您需要确保
html/
body元素的高度设置为
100%。
对于垂直对齐，将父元素的
width/设置
height为
100%并添加
display:table。然后对于子元素，将更
display改为
table-cell并添加
vertical-align: middle。
对于水平居中，您可以添加
text-align: center以使文本和任何其他
inline子元素居中。另外，您可以使用
margin: 0auto，假设元素是
block水平的。
html, body { height: 100%;}.parent { width: 100%; height: 100%; display: table; text-align: center;}.parent > .child { display: table-cell; vertical-align: middle;}<section > <div >I'm vertically/horizontally centered!</div></section>方法4-绝对
50%
从顶部移置：
此方法假定文本的高度已知-在这种情况下为
18px。
50%相对于父元素，仅从顶部绝对定位该元素。使用负值
margin-top，该负值是元素已知高度的一半，在这种情况下为-
-9px。
html, body, .container { height: 100%;}.container { position: relative; text-align: center;}.container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px;}<div > <p>I'm vertically/horizontally centered!</p></div>方法5-
line-height
方法（最不灵活-不建议）：
在某些情况下，父元素将具有固定的高度。对于垂直居中，您要做的就是
line-height在子元素上设置一个值，该值等于父元素的固定高度。
尽管此解决方案在某些情况下可以使用，但值得注意的是，当有多行文本（例如this）时，该解决方案将无法使用。
.parent { height: 200px; width: 400px; background: lightgray; text-align: center;}.parent > .child { line-height: 200px;}<div > <span >I'm vertically/horizontally centered!</span></div>
