千家信息网

html中怎么让div居中

发表于:2024-11-14 作者:千家信息网编辑
千家信息网最后更新 2024年11月14日,这篇文章主要介绍了html中怎么让div居中的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html中怎么让div居中文章都会有所收获,下面我们一起来看看吧。margin方
千家信息网最后更新 2024年11月14日html中怎么让div居中

这篇文章主要介绍了html中怎么让div居中的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html中怎么让div居中文章都会有所收获,下面我们一起来看看吧。

margin方法

可以通过margin来使得div居中,通过给margin-left设置的值为父元素的宽减去子元素的宽再除以2(本例中:(400-100)/2=150px),margin-top的值为父元素的高度减去子元素的高度值再除以2(本例中:(300-100)/2=100px)

例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

效果图:

position方法

可以通过定位的方法来使得div垂直居中,我们可以设置子元素绝对定位,另外设置top和left值为50%,但是需要注意一点在用定位是也要设置margin值,其中margin-left与margin-right的值都为负值,且值的大小是子元素宽高的一半

例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

效果图:


关于"html中怎么让div居中"这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对"html中怎么让div居中"知识都有一定的了解,大家如果还想学习更多知识,欢迎关注行业资讯频道。

0