HTML5中div是一個常見的用于布局的標簽,而對于div的垂直居中,常常是web開發(fā)者們需要解決的一個難題。下面是一段HTML5+CSS3代碼實現(xiàn)div垂直居中的示例。
<style>.outer{ display: table; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .inner{ display: table-cell; vertical-align: middle; } </style><div class="outer"><div class="inner">這里是需要居中的內容 </div></div>
首先,外層的div設置了position: absolute, top: 50%, left: 50%,通過設置top: 50%和left: 50%將div水平垂直居中。然后通過transform: translate(-50%,-50%)將div向上向左平移50%的距離,使其完美居中。
其次,內層的div設置display: table-cell, vertical-align: middle,使其垂直方向上居中。注意這里需要將display: table-cell,否則無法使用vertical-align: middle來居中。
通過這段HTML5+CSS3代碼,我們可以實現(xiàn)div的垂直居中,而且代碼量也不多,做到了視覺效果與代碼的優(yōu)化平衡。