css实现垂直水平居中的5种方法
- 给父元素设置table-cell,text-align,vertical-align
#big{ ???????width: 200px; ???????height: 200px; ???????border:1px solid #000; ???????display: table-cell; ???????text-align: center; ???????vertical-align: middle; ???} ???#small{ ???????display: inline-block; ???????width: 50px; ???????height: 50px; ???????background: yellow; ???????vertical-align:middle; ???}- 给子元素设置margin:auto
#big{ ???????width: 200px; ???????height: 200px; ???????border:1px solid #000; ???????position: relative; ???} ???#small{ ???????display: inline-block; ???????width: 50px; ???????height: 50px; ???????background: yellow; ???????position: absolute; ???????left:0; ???????right:0; ???????top:0; ???????bottom:0; ???????margin:auto; ???}- 弹性盒
#big{ ???????width: 200px; ???????height: 200px; ???????border:1px solid #000; ???????display: flex; ???????align-items: center; ???????justify-content: center; ???} ???#small{ ???????display: inline-block; ???????width: 50px; ???????height: 50px; ???????background: yellow; ???}- 利用translate实现，先进行绝对定位，然后通过translate让它自身往回移动50%
#big{ ???????width: 200px; ???????height: 200px; ???????border:1px solid #000; ???????position: relative; ???} ???#small{ ???????display: inline-block; ???????width: 50px; ???????height: 50px; ???????background: yellow; ???????position:absolute; ???????top:50%; ???????left:50%; ???????transform:translate(-50%,-50%); ???}- 通过新创建一个元素，设置高为父元素的高，让div以这个元素来执行vertical-align
#big{ ???????width: 200px; ???????height: 200px; ???????border:1px solid #000; ???????text-align: center; ???} ???#small{ ???????display: inline-block; ???????width: 50px; ???????height: 50px; ???????background: yellow; ???????vertical-align: middle; ???} ???span{ ???????display: inline-block; ???????width: 0; ???????height: 100%; ???????background: red; ???????vertical-align: middle; ????} ???</style></head><body> ???<div id="big"> ???????<div id="small"> ???????</div> ???????<span></span> ???</div></body>css实现垂直水平居中的5种方法
原文地址：http://www.cnblogs.com/twoeggg/p/8051840.html