div盒子居中的方法

已于 2023-02-13 17:39:12 修改
阅读量104 收藏
点赞数
分类专栏： 学习 文章标签： 前端 html css Powered by 金山文档
于 2023-02-13 17:38:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57145043/article/details/129013324
版权 
//style
  .box {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid black;
    }
  .box1 {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
//html
<body>
    <div class="box">
        <div class="box1 style"></div>
    </div>
</body>

不需要计算的

1.flex布局
 .box {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid black;
        /* flex布局方法 */
        display: flex;
        justify-content: center;
        align-items: center;

    }
2.translate方法
  .style {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
3.绝对定位方法
.style {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

需要计算的（不推荐使用）

  1. margin百分比计算
    .style {
        left: 25%;
        right: 25%;
        top: 25%;
        bottom: 25%;
        margin: auto;
     }
  1. 计算margin固定值
  .style {
        margin: 100px 100px;
    }
  1. 负margin固定值
   .style {
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }

哈哈杨@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让div盒子居中的4种方式
BuLuoXu的博客
07-03 1万+
方案一：盒子有设置宽高，直接margin: auto;方案二：用position，left、right、top、bottom加margin调整 方案三：position + transform：translate，水平垂直方向都可居中，例如 方案四：用弹性盒模型flex
设置div居中的方法
xufang461010923的专栏
07-12 2万+
对div居中方法的总结，包括 position 定位、flex布局、margin 等知识点
常用的8种实现div盒子居中的方法
qq_52409560的博客
09-25 7467
常用的8种实现盒子居中的方法
div盒子水平居中的方法
丰柏林的博客
08-12 2903
<!DOCTYPE html> <html> <head> <title>盒子水平居中的方法</title> <style type="text/css"> /* 1.使用margin: 0 auto; 2.使用margin左右边距 3.先让盒子左右边缘和父盒子垂直的中心线重叠，然后再把盒子往回移动自...
CSS盒子居中的几种方法
热门推荐
大灰狼的小绵羊哥哥的博客
08-25 4万+
1.第一种 利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30 div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30 按 Ctrl+C 复制代码 demo .div1{ wi
CSS盒子居中的常用的几种方法(小结)
11-21
第一种： 用css的position属性 ... .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { width: 40px; height: 40px; background-color: red;
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head>...meta name=viewport content=width=device-width, initial-scale=1.0>... <div class=father> <div class=son><
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
div盒子模型.pdf
10-08
"div盒子模型.pdf" 本文主要讲解了 CSS 盒子模型的概念和应用。CSS 盒子模型是指在网页设计中，对 div 元素的布局和样式的控制。它具有四个主要属性：内容（content）、填充（padding）、边框（border）和边界...
div或img图片高度随宽度自适应的方法
12-28
该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免...（这种方法是可以在图片上方垂直居中展示文字的，如果不需要可以选择最下方更简洁的代码） <div class=box> 行内元素垂直居中 <div class=img-box>
div盒子水平垂直居中的几种方法
qq_34200964的博客
08-15 8194
一、盒子没有固定的宽和高 方案1、使用transforms属性的translate平移 这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;my-test&lt;/title&gt; &lt;style type="text/css"&amp
如何让div盒子或文字居中显示
big_beer的博客
04-08 1万+
学习目标： 让div盒子居中的方法和让文字居中显示的方法 学习内容： 提示：这里可以添加要学的内容 例如： 1、 让div盒子水平垂直居中的方式 2、 让文字水平垂直居中的方式 div居中： 通过在大盒子设置flex布局让div居中显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>让div居中的方法</title> </head>
div盒子水平居中的4种方法
weixin_44867717的博客
11-13 9419
div盒子水平居中的4种方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
css 实现div盒子的居中(一) 持续更新
qq_48445738的博客
07-05 1137
在使用div+css布局的我们总会遇到需要把盒子模型居中的案列 那么怎么写才能让下面的盒子居中 现在的css代码是这样的 <style> div{ width: 400px; height: 400px; background-color: cornflowerblue; } </style> 那么我们现在给他居中吧 在css里面添加 margin: auto; 现在它就居中了
css div盒子居中的方法？
weixin_44535797的博客
04-13 3304
如何让盒子居中？ 1、block元素，使用margin属性 .center { margin: auto; width: 90%; border: 3px solid #73AD21; padding: 10px; } <div class="center"> <p>我是居中盒子，当width为100%时，margin属性失效。但是盒子...
如何实现div盒子水平垂直居中
weixin_42331327的博客
06-29 1万+
关于如何使一个小盒子在大盒子中水平垂直居中有很多方法，下面将列举常用的几种： html 代码 &amp;lt;div class=&quot;parent&quot;&amp;gt; &amp;lt;div class=&quot;child&quot;&amp;gt;DEMO&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; 公共css样式 .
如何将一个div盒子水平垂直居中?
weixin_45677987的博客
06-07 1218
1： 第一种方法： <div class="parent"> // 父级盒子 <div class="child"><div> // 子级盒子 </div> <style> .parent { width: 500px; height: 500px; border: 1px solid #ccc; } .child { width: 100px; height: 100px; border: 1px
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 627
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 341
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
htmldiv盒子居中
12-22
以下是两种将HTML div盒子居中的方法： 1. 使用相对定位和transform属性： ```html .bigbox { width: 500px; height: 500px; background-color: pink; margin: 0 auto; position: relative; } .box { width...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值