2.盒子定位居中两种方式

最新推荐文章于 2023-07-05 11:35:06 发布
最新推荐文章于 2023-07-05 11:35:06 发布
阅读量1k 收藏 1
点赞数
分类专栏： css

1.垂直居中

a.使用 vertical-align：middle

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            .d1{
                width: 500px;
                height: 500px;
                border: 1px solid blue;
                display: table-cell;
                vertical-align: middle;
            }
            .d2{
                width: 300px;
                height: 300px;
                border: 1px solid red;
            
            }

    
    </style>
</head>
<body>
      <div class="d1">
          <div class="d2"></div>
      </div>
</body>
</html>

b.让盒子移动50%,向后回退自己的一半

           

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            .d1{
                width: 500px;
                height: 500px;
                border: 1px solid blue;
                position: relative;
            }
            .d2{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                position:absolute;
                margin-top: 50%;
                top:-150px;
            }

    
    </style>
</head>
<body>
      <div class="d1">
          <div class="d2"></div>
      </div>
</body>
</html>

c 使用 maring 计算盒子的上下距离让盒子居中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            .d1{
                width: 500px;
                height: 500px;
                border: 1px solid blue;
            }
            .d2{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                margin-top: 100px;
            }

    
    </style>
</head>
<body>
      <div class="d1">
          <div class="d2"></div>
      </div>
</body>
</html>

 

2.水平居中

a.盒子水平线移动50%，向后退自身宽度的一半

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            background: red;
            /**盒子居中对齐**/
            position: absolute;

            /**第一种方式
            left: 50%;
            top:50%;
            margin-left: -250px;
            margin-top:-250px;*/

            /**第二种*/
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);//移动的距离以自身的宽度为准
        }
    </style>
</head>
<body>
        <div></div>

</body>
</html>

b.使用margin：0 auto 居中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            .d1{
                width: 500px;
                height: 500px;
                border: 1px solid blue;
            }
            .d2{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                margin: 0 auto;
            }

    
    </style>
</head>
<body>
      <div class="d1">
          <div class="d2"></div>
      </div>
</body>
</html>

c 测量最有边距 使用margin 移动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            .d1{
                width: 500px;
                height: 500px;
                border: 1px solid blue;
            }
            .d2{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                margin-left:100px;
            }

    
    </style>
</head>
<body>
      <div class="d1">
          <div class="d2"></div>
      </div>
</body>
</html>

d把盒子转成行内块 使用 text-align进行水平居中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            .d1{
                width: 500px;
                height: 500px;
                border: 1px solid blue;
                text-align: center;
            }
            .d2{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                display: inline-block;

            }

    
    </style>
</head>
<body>
      <div class="d1">
          <div class="d2"></div>
      </div>
</body>
</html>

 

 

吃不到的花生仁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒子定位
zhagningt的博客
10-29 2726
我觉得 定位问题应该是一个重难点，于是今天就自己所看的内容总结一下。盒子的定位包括静态定位，相对定位，绝对定位和固定定位。定位允许定义元素相对于其正常位置，或父级元素，另一个元素或浏览器本身   1.静态定位，盒子定位为静态定位时，默认值是static,元素框正常生成，块级元素生成一个矩形框。          2.相对定位，position:relative时是相对定位，表示该元
css两种垂直居中对齐解决方案(小结)
01-19
第一种垂直居中方法 利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件： 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素...
盒子居中的三种方法(最简单）
热门推荐
qq_46034942的博客
02-16 2万+
1.利用定位（子绝父相）、margin-left、和margin-top实现 子盒子相对于父盒子进行移动。在父盒子内，先移动父盒子宽的一半，再移动父盒子高的一半。此时的子盒子在父盒子的偏右下的位置，再次需要移动子盒子，将子盒子向左移动自身宽度的一半，再向上移动自身高度的一半。 缺点在于如果修改了子盒子的宽高，则就需要修改margin-left和margin-top的值 .father { /* 给父盒子设置相对定位 */ position: rel
盒子模型中定位总结
m0_59734316的博客
07-31 2085
1.盒子模型中共有五种定位，分别为：静态定位（static)、粘性定位（sticky）、相对定位（relative）、绝对定位（obsoulte）、固定定位（fixed）。前两种应用较少，着重记住后三种定位。 定位模式 是否脱标 移动位置 是否常用 相对定位 relative 否（占有位置） 相对于自身位置移动 常用 绝对定位 obsoulte 是（不占有位置） 带有定位的父级移动 ..
让子盒子水平和垂直居中的五种方法
Nirvana_boy_的博客
03-27 1万+
让子盒子水平和垂直居中的五种方法
前端开发_HTML5_盒子定位(position)
u013185175的博客
12-17 3447
盒子定位(position) 1.引入 我们知道浏览器在解析html页面的时候是按照标准的文档流方式就行解析的。即html页面元素是按照从左到右、自上而下的方式进行排布(我们可以这样认为，整个页面是一个二维坐标，坐标的原点在左上角，坐标轴的方向如下所示)，我在进行页面布局的时候，需要页面元素按照指定的方式或者是位置进行排列。这一个我们就需要定位元素的摆放位置。下面我们一起学习一下盒子的定位问题。 2.盒子定位(position) (1).分类:盒子定位根据给出的不同的方式，给出了6种不...
水平垂直居中.docx
11-24
本文将介绍两种实现水平垂直居中的方法，并对BFC（块级格式化上下文）的布局规则进行详细的解释。 方法一：使用相对定位和绝对定位 第一种方法是使用相对定位和绝对定位来实现水平垂直居中。在这种方法中，我们...
css布局定位.zip
03-20
2. 定位模式：CSS提供了相对定位、绝对定位、固定定位和静态定位四种定位方式。相对定位使元素相对于其正常位置移动，不脱离文档流；绝对定位相对于最近的非静态定位祖先元素定位；固定定位则相对于浏览器窗口定位；...
居中显示的漂浮广告代码.zip
11-21
在网页布局中，居中对齐是一种常见的设计方式，可以使内容看起来更加平衡和专业。在CSS（层叠样式表）中，可以使用多种方法实现居中对齐。例如，对于块级元素，可以设置`margin: auto`，使左右边距自动计算，从而...
css控制div中元素居中的示例.pdf
最新发布
08-22
这种方法需要同时使用绝对定位和负外边距两种技巧。 下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘 50% 的位置。这样，该容器的左外边距将从页面 50% 宽度的...
盒子的模型及定位
zheshuidingdezhu的博客
10-26 2124
盒子的模型及定位 盒子的模型： 两种盒子模型 1.content-box盒模型 这个盒子模型会自我膨胀，盒子的外边距/内边距/盒变框是不占据盒子的宽高的，所以，当给这个盒子定义margin/padding/border时，盒子的大小也会跟着这些属性而改变！ 2.border-box盒模型 这个盒子模型不会自我膨胀，盒子的内边距/盒子的边框是会占据刚开始设置盒子的宽高的，所以，当给这个盒子定义padding/border时，盒子的大小不会变，但盒子的内容会被挤压！ 盒子的定位： 盒子有五种定位方式 1.绝对定
实现盒子居中的5种方式
huangyuting98的博客
02-24 5669
实现盒子居中的5种方式
常用盒子居中的方法
ch3135991966的博客
07-05 269
css盒子居中
总结盒子居中的常用方法
qq_44473483的博客
07-23 4491
让元素居中是每个前端都会经历的一个问题，而解决该问题的方法也各不相同，各有长短，今天总结下所知晓的方法，并分析利弊。 基础代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>订阅发布</title> <style> .bigBox { width: 500px; height: 500px; backg
盒子的定位
阿牛哥的博客
10-21 2104
盒子的定位 一、 定位 （position） 定位position 说明： 设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。 定位 position 语法： position : static 、absolute 、relative、fixed 。 static : 称为静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 relative ：称为相对定位，使用相对的盒子的位置常以标准流动排版方式为基础，然后使盒子相对于它在原来的位置偏移指定的距离。相对
html中盒子的定位,css盒子的定位有哪些方法？
weixin_36143290的博客
06-07 3428
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定他的位置，盒子定位分为以下四种 ：推荐：css手册1、静态位置(position：static)也就是默认值：每一个元素...
（8）盒子的定位
weixin_30642305的博客
05-26 622
盒子的定位 一、 定位 （position） 定位position 说明：设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。 定位 position 语法：position : static 、absolute 、relative、fixed。 static : 称为静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 rel...
定位盒子的居中设置
LHarashi的博客
04-28 383
定位盒子的居中设置 布局中会经常性的使用到定位，而定位会带来一定的好处，也有一定的坏处 例如下方的例子 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定盒子居中显示</title> <style> *{ margin: 0; }
定位的盒子居中方法
皇总监的博客
03-24 2014
html> html> head lang="en"> meta charset="UTF-8"> title>title> style> .box{ width: 400px; height: 200px; background-color: red; /*使用
盒子居中
05-29
要让一个盒子在页面中居中，可以使用以下方法： 1. 使用margin属性实现居中 在CSS中，为盒子设置margin属性，并将左右margin设置为...以上两种方法都可以实现盒子在页面中居中，可以根据实际需求选择使用哪种方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值