CSS中设置div居中有多种方法,以下介绍其中两种较为常见的方法。 /* 方法一:使用margin实现水平居中 */ div { width: 200px; height: 100px; backgr
CSS中设置div居中有多种方法,以下介绍其中两种较为常见的方法。
/* 方法一:使用margin实现水平居中 */ div { width: 200px; height: 100px; background-color: #ccc; margin: 0 auto; /* margin-left和margin-right设为auto */ }
以上代码中,margin-left和margin-right都设为auto,这表示让浏览器自动计算左右两侧的边距,从而实现水平居中。
/* 方法二:使用flex布局实现水平居中 */ .container { display: flex; /* 将容器设置为弹性盒子 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } .container div { width: 200px; height: 100px; background-color: #ccc; }
以上代码中,将容器设置为弹性盒子,并使用justify-content属性将其中的子元素水平居中,使用align-items属性将其垂直居中。
以上便是两种设置div水平居中的方法,可以根据实际需求选择不同的方法。
粉丝
0
关注
0
收藏
0