CSS中的垂直居中一直是前端开发者常遇到的一个问题。在布局中,父元素的垂直居中尤其困难,因为子元素的高度和父元素的高度往往是不一致的。但是通过CSS的flex布局可以轻松解决这个问题。
.parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }
如上代码所示,当父元素设置了 display:flex
属性后,只需要添加两行代码,分别是 justify-content:center
和 align-items:center
,子元素就能水平垂直居中了。
如果需要让子元素上下间距有一定的距离,只需要在父元素中加上一个 flex-direction:column
的属性即可。
.parent { display: flex; flex-direction: column; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }
上述代码中的 flex-direction: column
属性使得子元素在布局中是从上往下排列的,同时保持水平、垂直居中的状态。
总之,通过CSS的flex布局,可以很轻松地实现父元素中子元素的垂直居中。