在网页设计中,垂直居中一直是一个令人困扰的问题,特别是在CSS中。
如何让一个元素纵向垂直居中呢?经过多年的发展,有了多种方法。
/* 第一种方法,使用display:flex */ .parent{ display:flex; align-items:center; } /* 第二种方法,使用absolute+transform */ .parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY(-50%); } /* 第三种方法,使用line-height */ .parent{ line-height:200px; } .child{ vertical-align:middle; }
以上几种方法都可以达到垂直居中的效果,使用哪种方式取决于具体情况和个人习惯。