html块级元素的水平垂、直居中的方式

这篇博客针对初学者,详细介绍了块级元素的水平和垂直居中方法,包括margin: 0 auto, 绝对定位 + 负外边距, 绝对定位 + translateX等。同时提到这些方法的适用场景和注意事项,如需实现水平垂直居中,可以结合使用。文章最后提及使用flex布局也是实现居中的有效方式。" 92207627,8257255,SPI接口与ATT7022E通信详解,"['嵌入式开发', 'SPI接口', '硬件SPI', '微控制器']
摘要由CSDN通过智能技术生成

说明

对于初学者来说,块级元素的剧中,也是一大难题,我学习的时候,也是一脸懵逼,每次遇到都要百度,但是写的多了也自然记住一些常用的剧中方式,但是还是很模糊,今天就来好好总结一些。

布局

布局即为简单,一个div套着一个div,使inner1在wrap居中显示。

 <body>
     <div id="wrap">
         <div class="inner1"></div>
     </div>
 </body>

水平剧中

  • margin: 0 auto;

    子元素的宽度小于父元素,不然子元素宽度等于父元素宽度,就没意义了。

 #wrap{
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: red;
 }
            
  #wrap .inner1{
    width: 100px;
    height
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现display属性的水平垂直居中,可以使用table-cell方式。首先,将父容器设置为display: table,并设置其宽度和高度。然后,将子元素设置为display: table-cell,并使用vertical-align: middle将其居中。如果子元素是块级元素,可以使用margin: auto将其水平居中。如果子元素是行内元素,可以给父容器设置text-align: center使其水平居中。具体的代码如下: ```html <style> .father { display: table; width: 400px; height: 200px; } .son { display: table-cell; vertical-align: middle; text-align: center; /* 当子元素为行内元素时,使用text-align: center实现水平居中 */ } .block { margin: auto; /* 当子元素为块级元素时,使用margin: auto实现水平居中 */ } </style> <div class="father"> <span class="son"> <div class="block">内容</div> </span> </div> ``` 通过以上方法,可以实现display属性的水平垂直居中效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [CSS基础知识(五):水平居中居中](https://blog.csdn.net/weixin_44706267/article/details/121024126)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [css水平居中的详细实现方式(6种)](https://blog.csdn.net/weixin_46591819/article/details/129161551)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值