首页 > 其他分享 >定位控制元素水平垂直居中

定位控制元素水平垂直居中

时间:2023-10-13 17:00:12浏览次数:38  
标签:居中 定位 50% 盒子 元素 height background margin 200px

浏览器中盒子的位置

1.使用绝对元素,相对于浏览器第一窗口进行50%的距离设置,盒子会移动到第四象限;

 再使用外边距设置让盒子移动到中间位置(注意正负值的设置)

 *{margin: 0;
         padding: 0;
        }
        div{
            width:200px;
            height:200px;
            background: yellowgreen;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

父盒子中子盒子的位置

方法同上,但是位置变化是相对于父盒子

*{margin: 0;
         padding: 0;
        }
        .box{
            width:500px;
            height:500px;
            background: yellowgreen;
            position:relative
        }
        .child{
            width:200px;
            height:200px;
            background: red;
            position:absolute;
        }

 

标签:居中,定位,50%,盒子,元素,height,background,margin,200px
From: https://www.cnblogs.com/Eliauk-1210/p/17762566.html

相关文章

  • DOM 元素是什么
    DOM(DocumentObjectModel)元素是HTML或XML文档中的一个节点。它可以是文档的根节点、元素节点、文本节点、注释节点等。DOM元素在HTML页面中表示页面中的标签,如<div>、<p>、<span>等。DOM元素具有以下特点:标签:DOM元素对应于HTML页面中的标签,如<div>、<p>等。属性:DOM元素可......
  • np.array强制内部元素格式统一
    df_test=pd.DataFrame(data=np.array([np.repeat(['class'+str(i+1)foriinrange(2)],10),list(range(10,0,-1))*2,list(range(1,11))*2]).T,columns=['class']+['x'+str(i+1)for......
  • LeetCode27. 移除元素
    描述给你一个数组nums和一个值val,你需要原地移除所有数值等于val的元素,并返回移除后数组的新长度。不要使用额外的数组空间,你必须仅使用O(1)额外空间并原地修改输入数组。元素的顺序可以改变。你不需要考虑数组中超出新长度后面的元素。示例1输入:nums=[3,2,2,3......
  • 笨办法学Python3 习题34 访问列表的元素
    基数位置0代表 序数第一X=["a","b","c"]X[0]和X[-0] 代表X列表里的第一个数X[:]  #代表全部的列表内容X[0:1] //['a']  //位置0至位置1之前的元素X[0:2] //["a","b"] //位置0至位置2之前的元素X[-1]  //代表倒数第一个的元素hello="hellowor......
  • z-index 点击 不生效 遮挡 如何让被遮挡的下层元素能被点击到(且上层也能) 上层下层都能
    https://stackoverflow.com/questions/64052019/make-element-with-smaller-z-index-clickable一种方案是在上层元素的点击事件调用的函数中,通过js代码,选择器选中下层元素,然后.click()代码触发下层元素的点击事件 (如果上层不需要被点击,可以用pointer-events:none;)......
  • vue中v-bind绑定元素属性
    vue中v-bind绑定元素属性<html>  <head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>vue.js</title>  </head>  <b......
  • 如何水平居中一个元素?
    内容来自DOChttps://q.houxu6.top/?s=如何水平居中一个元素?如何使用CSS在另一个<div>内水平居中一个<div>?<divid="outer"><divid="inner">Foofoo</div></div>可以使用以下CSS样式实现:#outer{display:flex;justify-content:center......
  • Linq取单一元素
    LINQ通常查询到的结果是IEnumerable<T>集合类型,想要从中取出单一的元素,能使用Single、First、Last、ElementAt等方法,以及它们带有OrDefault的形式。Single返回序列中的惟一元素,First、Last返回第一個、最後一個元素。对比:方法序列为null序列不包含任何元素序列只包含一个......
  • css伪类和伪元素
    一、伪类说明  定义:伪类⽤于向某些选择器添加特殊的效果  超链接(a标签)伪类:a标签我们在日常工作和学习中用的很多,我们只知道默认状态下为蓝色,但是a标签其实有四种状态。    1、未访问前为蓝色(如果a标签使用不是蓝色而是紫色,那么近期访问过该网站,需要去浏览器删除近期记......
  • 代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素
    704.二分查找链接:https://leetcode.cn/problems/binary-search/description/思路:关键是定义清楚区间边界,想清楚middle在计算中是否可能取到左边界or右边界。若采用闭区间,则middle可能等于左/右边界值。27.移除元素链接:https://leetcode.cn/problems/remove-element/思路:暴......