在CSS中,居中是常见的需求。本文将讨论两个常用的方法来居中两个盒子。 html: <div class= parent > <div class= chil
在CSS中,居中是常见的需求。本文将讨论两个常用的方法来居中两个盒子。
html: <div class="parent"> <div class="child1">Child 1</div> <div class="child2">Child 2</div> </div> 方法1: .parent { display: flex; justify-content: center; align-items: center; } 方法2: .parent { position: relative; } .child1, .child2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
方法1使用了CSS的flexbox布局。设置父元素的display为flex,然后使用justify-content和align-items属性将子元素水平和垂直居中对齐。 方法2则使用了CSS的相对定位和绝对定位。首先设置父元素的position为relative,然后在子元素中设置position为absolute,并将top和left设置为50%。最后使用transform属性来使盒子水平和垂直居中对齐。
粉丝
0
关注
0
收藏
0