1. 美站网首页
  2. 美站百科

div居中显示(div垂直居中显示三种方式)

美站资讯 • • 美站百科 • 阅读 0

这个问题经常出现在前端面试题中。接下来，小果将带你揭开一些最常见的答案。关注我！了解更多前端干货！关注我！了解更多前端干货！首先设置一个html结构和css的基

这个问题经常出现在前端面试题中。接下来，小果将带你揭开一些最常见的答案。

div居中显示(div垂直居中显示三种方式)

关注我！了解更多前端干货！关注我！了解更多前端干货！

首先设置一个html结构和css的基本样式。

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& lttitle & gt如何使div水平居中

#爸爸{宽度:400px高度:200px边框:3px纯绿；边距:30px自动；} # son { width:100px；高度:100px背景:紫色；}方法一:纯保证金

/*在/* CSS */# son { margin:0 auto；处添加以下代码；}方法二:位置定位

/*在/* CSS */# dad { position:relative；}#son{位置:绝对；左:50%；左边距:-50px；}/*注意:margin-left为负数，是这个div #son */Method 3: flexbox宽度的一半

/*将以下代码添加到/* CSS */# dad { display:flex；justify-content:居中；}/*注:弹性盒的大部分属性都写在父体上*/以上三个是最常见的。下次再说其他奇形怪状的方法~

关注我，带你了解更多前端干货！

学前端，选睿英课堂！

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。

作者：美站资讯，如若转载，请注明出处：https://www.meizw.com/n/34167.html

赞 (0)
美站资讯美站资讯
0
上一篇 2022年 10月 6日 am9:20
下一篇 2022年 10月 6日 am9:22

相关推荐

发表回复

登录后才能评论