首页 > 其他分享 >让div盒子居中

让div盒子居中

时间:2023-12-26 11:55:22浏览次数:33  
标签:居中 214 盒子 color height width rgb background div

<template>
  <!-- <div class="about">
    <h1>This is an one page</h1>
  </div> -->
  <div class="about">
    <!-- 1.给盒子设置宽高,然后用margin:0 auto; -->
    <div class="one">第一种:居中</div>
    <!-- flex布局 -->
    <div class="two">第二种:居中</div>
    <!-- 让子盒子居中 -->
    <div class="three">
      <div class="son">第三种:居中</div>
    </div>
    <div class="fourth">
      <div class="son">第四种:居中</div>
    </div>
  </div>
</template>


<script>
export default {};
</script>

<style lang="less" scoped>
.one {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: antiquewhite;
}
.two {
  display: flex;
  justify-content: center;
  background-color: rgb(214, 134, 29);
}
.three {
  position: relative;
  width: 600px;
  height: 600px;
  background-color: rgb(45, 29, 214);
  .son {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%; /*盒子左上角的那个点在页面正中间*/
    left: 50%;
    transform: translateX(-50%) translateY(-50%); /*不需要知道盒子宽度*/
    background-color: rgb(29, 214, 45);
  }
}
.fourth {
  position: relative;
  width: 600px;
  height: 600px;
  background-color: rgb(214, 29, 118);
  .son {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgb(202, 214, 29);
  }
}
</style>

标签:居中,214,盒子,color,height,width,rgb,background,div
From: https://www.cnblogs.com/hxy--Tina/p/17927827.html

相关文章

  • CSS中的各种居中
    在CSS布局时经常会需要实现水平居中,垂直居中,水平垂直居中这样的要求但是却又不是非常的在意,所以总结一下。文本水平居中1.使用text-align属性:将容器的text-align属性设置为"center",可以使文本在容器中水平居中。<style>.container{width:500px;......
  • P5840 [COCI2015] Divljak
    题意:Alice有\(n\)个字符串\({S}_1,{S}_2,\ldots,{S}_n\),Bob有一个字符串集合\({T}\),一开始集合是空的。接下来会发生\(q\)个操作,操作有两种形式:1P:Bob往自己的集合里添加了一个字符串\({P}\)。2x:Alice询问Bob,集合\({T}\)中有多少个字符串包含串\({S}_x\)(......
  • 两个Excel表格核对 excel表格中# DIV/0 核对两个表格的差异,合并运算VS高级筛选
    两个Excel表格核对  excel表格中#DIV/0核对两个表格的差异,合并运算VS高级筛选1.两列顺序一样的数据核对方法1:加一个辅助列,=B2=C2结果为FALSE的就是不相同的方法2:两列数据,按CTRL+\然后直接标记颜色就把不一样的找出来2.两列顺序不一致的情况方法1:用VLOOKUP来查找匹......
  • Codeforces Round 917 (Div. 2)
    基本情况A题秒了,B题卡了一年。B.EraseFirstorSecondLetterProblem-B-Codeforces卡题分析两方面原因没有变通,一开始的思路是公式算出总字串数再想办法找重复的减掉,但搞了一个小时都不可行,应该早点换成正着来找的思路。没有更深入的分析样例。最后虽然出来了,......
  • contentEditable实现div可编辑,控制插入节点(兼容IE)
    实现可文字编辑也可插入节点的功能展示如下:html5中contentEditable属性规定是否可编辑元素的内容,给需要编辑的节点添加contentEditable="true"。兼容性:当点击Button时在编辑框内增加节点:一开始div中加的span标签,发现有几个缺陷:点删除键时span不会删除整个,而是一个一个删除span里的......
  • 汇编-idiv有符号整数除法
     有符号除法就是将一个有符号数除以另一个有符号数有符号整数除法与无符号除法几乎相同,只有一个重要的区别:在进行除法之前,必须将被除数进行符号扩展。为了说明为何有此必要,我们先不这么做。下面的代码使用MOV将-101赋值给AX,即DX:AX的低半部分:       ......
  • Vue3之实现一个可拖拽的div
    实现一个可拖拽的div写法如下:constchatbox=ref();constdragx=(el)=>{letoDiv=chatbox.value;//当前元素letdisX=el.clientX-oDiv.offsetLeft;letdisY=el.clientY-oDiv.offsetTop;document.onmousemove=function(e){//通过事件委托,......
  • 汇编-div无符号整数除法
      在32位模式下,DIV(无符号整数除法)指令执行8位、16位及32位的无符号整数除法。无符号除法(unsigneddivision)定义为一个无符号数除以另一个无符号数。其中,除数为单个寄存器或内存操作数。格式如下: 【a=c÷b,读作c除以b(或b除c)。其中,c叫做被除数,b叫做除数】 下表给......
  • codeforces刷题(1100):1907C_div3
    C、RemovalofUnattractivePairs跳转原题点击此:该题地址1、题目大意  给定一个字符串,可以删除相邻的两个不相等的字符。问你删除后能得到最小的字符串长度为多少。2、题目解析  因为只要两个不相等的字符相邻就能消除,所以只需要找到数量最多的字符,只要它的数量比其它字......
  • CF contest 1909 Pinely Round 3 (Div. 1 + Div. 2) 题解(Vanilla的掉分赛)
    CFcontest1909PinelyRound3(Div.1+Div.2)Vanilla的掉分赛绪言PinelyRound3(Div.1+Div.2)-Codeforces\[\color{purple}\large\textbf{世界上只有一种真正的英雄主义,}\]\[\color{red}\large\textbf{就是认清了生活的真相后还依然热爱它。}\]\[\color{gray}......