CSS中如何让一个居中显示呢?以下我们介绍两种方法。/* 方法一:使用margin */ div { width: 300px; height: 200px; margin: 0 auto; } /*
CSS中如何让一个居中显示呢?以下我们介绍两种方法。
/* 方法一:使用margin */ div { width: 300px; height: 200px; margin: 0 auto; } /* 方法二:使用flex */ .container { display: flex; justify-content: center; align-items: center; } .container div { width: 300px; height: 200px; }
方法一中,我们需要将div元素设置为一个固定的宽度和高度,并将其margin属性设置为0 auto。其中,auto表示让浏览器自动计算左右的margin值,这样就能实现水平居中。
方法二中,我们需要在父容器(例如一个class为.container的)中设置display: flex,并将justify-content和align-items属性都设置为center来实现同时水平和垂直居中。注意,这种方法需要使用父容器来包裹。
粉丝
0
关注
0
收藏
0