通常使用的垂直居中方法:
1 <style> 2 div{ 3 width:100px; 4 height:100px; 5 top:50%; 6 left:50%; 7 margin-left:-50px; 8 margin-top:-50px; 9 position:absolute; 10 text-align:center; 11 inline-height:100px; 12 } 13 </style>
这种方法不方便的地方是一旦块级元素的宽高度变了后,需要随之改变margin的值,
所以使用translate进行优化:
<style> div{ width:100px; height:100px; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); position:absolute; text-align:center; inline-height:100px; } </style>
这样无论块级元素宽高如何变,都可以保证垂直居中。
时间: 2024-10-15 12:50:24