wrap .box{

width: 200px;
height:200px;
background: pink;

// 方案1
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;

//方案2
position:absolute;
top:50%;
left:50%;
transfrom:translate(-50%,-50%);
}

//方案3

wrap{

width:500px;
height: 500px;
background: gray;

display: flex;
justify-content: center; // 主轴水平居中
align-items: center; // 侧轴居中
}

子元素位于父元素中央 css实现的更多相关文章

  1. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

  2. 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  3. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  4. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  5. WPF XMAL获取元素的父元素,子元素

    /// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...

  6. margin (子元素远离父元素边框)

    如果父盒子没有设置border框着,那么他的子元素无法利用margin-top 来远离父元素的上边框 如果使用了margin-top会使子元素和父元素一起往下移 (子想离,父不设置border边框 则 ...

  7. ie10中元素超出父元素的宽度时不能自动隐藏

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...

  8. 让子元素在父元素中水平居中align-items

    做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元 ...

  9. justify-content 定义子元素在父元素水平位置排列的顺序

    justify-content 定义子元素在父元素水平位置排列的顺序,需要和display:flex使用才会生效. 有五个属性: 1.flex-start(默认值)  左对齐 2.flex-end 右 ...

随机推荐

  1. 源码包安装Mysql

    特殊原因我需要装在个人用户下 libtool-2.4.2.tar.xz mysql-5.1.37.tar.gz     1.解压libtool-2.4.2.tar.xz tar -xvf libtoo ...

  2. 看不懂源码?先来恶补一波Object原型吧

    目录 Object Object属性 1.Object.prototype 2.Object.name Object方法 1.Object.assign() 2.Object.create() 3.O ...

  3. expdp和impdp

    前言 一句话  expdp和impdp,只能在本地服务器运行 使用前 1.创建逻辑目录,该命令不会在操作系统创建真正的目录,最好以system等管理员创建.  create directory dpd ...

  4. Java访问数组

    package java03; /* 使用动态初始化数组的时候,其中的元素会自动拥有一个默认值,规则如下: 如果是整数类型,默认为0 如果是浮点类型,默认为0.0 如果是字符类型,默认为'\u0000 ...

  5. day12 python函数名的应用 闭包 迭代器

    day12 python   一.函数名的应用(是第一类对象)     函数名的命名规范和变量是一样的     函数名其实就是变量名 def func():     print('i am funct ...

  6. jquery submit事件

    jquery submit 事件 $('#form').submit(function(){ if(true){ //do return true; }else{ //do return false; ...

  7. java容器中 哪些是线程安全的

    容器中线程安全的如:vectory,hashtable,非线程安全的如:hashmap,arrylist等.      对于原定义非线程的容器如:hashmap,arraylist可以使用Collec ...

  8. delphi文件类型

    1.DPR: Delphi Project文件,包含了Pascal代码.应用系统的工程文件2.PAS: Pascal文件,Pascal单元的源代码,可以是与窗体有关的单元或是独立的单元.3.DFM:D ...

  9. 自定义缓存管理器 或者 Spring -- cache

    Spring Cache 缓存是实际工作中非常常用的一种提高性能的方法, 我们会在许多场景下来使用缓存. 本文通过一个简单的例子进行展开,通过对比我们原来的自定义缓存和 spring 的基于注释的 c ...

  10. 关于I2C和SPI总线协议【转】

    关于I2C和SPI总线协议 IICvs SPI 现今,在低端数字通信应用领域,我们随处可见IIC (Inter-Integrated Circuit) 和 SPI (Serial Peripheral ...