面试基础12:如何居中一个div?position,absolute,flex,百分比

(1) 2024-09-16 21:23

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
面试基础12:如何居中一个div?position,absolute,flex,百分比,希望能够帮助你!!!。

水平居中:给div设置一个宽度,然后添加margin:0 auto;属性。

div{ width:200px; margin:0 auto; } 

绝对定位的div居中:

 div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */ } 
面试基础12:如何居中一个div?position,absolute,flex,百分比_https://bianchenghao6.com/blog__第1张

水平垂直居中一:

面试基础12:如何居中一个div?position,absolute,flex,百分比_https://bianchenghao6.com/blog__第2张

水平垂直居中二:

面试基础12:如何居中一个div?position,absolute,flex,百分比_https://bianchenghao6.com/blog__第3张

水平垂直居中三:

面试基础12:如何居中一个div?position,absolute,flex,百分比_https://bianchenghao6.com/blog__第4张

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复