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. java并发编程之美-阅读记录7

    java并发包中的并发队列 7.1ConcurrentLinkedQueue 线程安全的无界非阻塞队列(非阻塞队列使用CAS非阻塞算法实现),其底层数组使用单向列表实现,对于出队和入队操作使用CAS非 ...

  2. samba 添加新用户

    添加samba新用户需要有root权限 1. 在Linux服务器根目录下(黄色背景部分是需替换部分:换成你自己的用户名) sudo smbpasswd -a username 2. 修改samba配置 ...

  3. vue证明题X,vue设置集

    1.开发中的控制台tab格式警告隐藏 出现情况如图: 解决方案:找到此代码,注释掉 2.控制台error报告 出现情况如图 解决方案:找到此代码,替换,对浏览器中的警告进行隐藏 遇到就更

  4. iview 分割面板效果(二)

    源码地址:https://gitee.com/yolanda624/coffer/tree/master/src/components/a-split-panel

  5. Web 请求之--性能相关

    本博客代码运行环境 python : Python 3.7.1rc1 version pip : pip 19.1.1 version Scrapy: scrapy 1.6.0 version asy ...

  6. Codeforces 1179D 树形DP 斜率优化

    题意:给你一颗树,你可以在树上添加一条边,问添加一条边之后的简单路径最多有多少条?简单路径是指路径中的点只没有重复. 思路:添加一条边之后,树变成了基环树.容易发现,以基环上的点为根的子树的点中的简单 ...

  7. log4j.xml配置详解(转)

    转自:http://willow-na.iteye.com/blog/347340 Xml代码 <?xml version="1.0" encoding="UTF- ...

  8. 力扣 ——3Sum python (三数之和)实现

    题目描述: 中文: 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 英文: Give ...

  9. OpenCV常用基本处理函数(4)简单变换,阈值等

    几何变换 缩放 img=cv2.imread('messi5.jpg') # 下面的 None 本应该是输出图像的尺寸,但是因为后边我们设置了缩放因子 # 因此这里为 None res=cv2.res ...

  10. Hashtable、HashMap、TreeMap、ConcurrentHashMap、ConcurrentSkipListMap区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11444013.html 并发场景下的Map容器使用场景 如果对数据有强一致要求,则需使用Hashtab ...