CSS布局中,垂直居中是一个常见的需求。本文将为大家介绍两个盒子垂直居中的方法:方法一:使用flexbox.container{ display: flex; align-items: center;
CSS布局中,垂直居中是一个常见的需求。本文将为大家介绍两个盒子垂直居中的方法:
方法一:使用flexbox
.container{ display: flex; align-items: center; justify-content: center; }
以上代码将父元素.container设置为flex布局,同时将子元素垂直和水平方向居中。
方法二:使用transform
.container{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
以上代码将子元素的position属性设为absolute,并将top和left属性设为50%。然后使用transform属性将子元素向左上方移动自身宽高的一半。这样就实现了垂直和水平方向的居中。
以上两种方法都可以实现垂直居中,但是使用flexbox布局更加简便和易于理解,特别是在响应式布局中更为方便。而使用transform方法则可以在不知道父元素高度时使用。
粉丝
0
关注
0
收藏
0