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. MD相关语法

    原文链接:https://www.jianshu.com/p/96ecaa2cc989 标题 一个#表示一级标题,最多6个表示6级标题 h1 h2 h3 h4 h5 h6 列表 无序列表,用 * + ...

  2. HDU-4003 Find Metal Mineral 树形DP (好题)

    题意:给出n个点的一棵树,有k个机器人,机器人从根节点rt出发,问访问完整棵树(每个点至少访问一次)的最小代价(即所有机器人路程总和),机器人可以在任何点停下. 解法:这道题还是比较明显的能看出来是树 ...

  3. Codeforces 356D 倍增优化背包

    题目链接:http://codeforces.com/contest/356/problem/D 思路(官方题解):http://codeforces.com/blog/entry/9210 此题需要 ...

  4. css3--文字效果

    text-shadow <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  5. 力扣——single number 2(只出现一次的数字 2) python实现

    题目描述: 中文: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现了三次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? ...

  6. CentOS7修改密码 及 随后可能的报错处理(failed to load SELinux policy freezing)

    Centos7修改root密码: https://blog.csdn.net/shanvlang/article/details/80385913 估计不需要"SELinux,不要执行&qu ...

  7. mysql的一个工具 mysql-utilities

    mysql-utilities是mysql的一个工具集合,它是基于----- python2 --- 实现的,从官网查看到最新版本为mysql-utilities-1.6.5.tar.gz编译安装 w ...

  8. 关于Linux_系统资源监控_dmesg_free_uptime_uname

    (系统资源查看命令-dmesg[查看系统内核资源信息])->判断服务器的硬件状态 Comment:dmesg | grep CPU,指定查看cpu资源信息 (系统资源查看命令-free[查看内存 ...

  9. Windows最值得安装的小众软件

    用电脑这么久,也琢磨出自己的一些使用心得.今天和大家分享几个Windows效率工具.数量不多,但每个都是精品. ▌软件下载-卫星公众好「悦享软件」,在后台会话框中回复关键字:h108 1.Ditto ...

  10. [NOIP模拟33]反思+题解

    又考了一次降智题…… 拿到T1秒出正解(可能是因为我高考数学数列学的海星?),分解质因数以后用等比数列求和计算每个因子的贡献.但是当时太过兴奋把最后的$ans \times =$打成了$ans +=$ ...