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. [Fw]初探linux中断系统(1)

    1. 重要接口 LDD上说,“内核维护了一个中断信号线的注册表,该注册表类似于I/O端口的注册表.模块在使用中断前要先请求一个中断通道(或者中断请求IRQ),然后在使用后释放该通道.” 撇开系统如何遍 ...

  2. Nacos-服务注册地址为内网IP的解决办法

    最近在使用Spring Cloud Alibaba这一套微服务解决方案,但是在服务注册的时候,网关死活找不到微服务地址,自己的微服务通过网关怎么也访问不到. 查找原因 仔细一查才发现,网关去访问了一个 ...

  3. java反射-学习

    使用Java反射机制可以在运行时期获取Java类的信息,可获取以下相关的内容: Class对象 类名 修饰符 包信息 父类 实现的接口 构造器 方法 变量 注解 简单的反射例子: 1.获取class对 ...

  4. js 可迭代对象

    作用:可以简化使用循环语句初始化一个变量记录迭代位置的操作 function createIterator(iterms) { let i = 0 return { next() { let done ...

  5. 中文字符集编码unicode,gb2312,cp936,GBK,GB18030介绍

    概要: UTF-8的一个特别的好处是它与ISO- 8859-1完全兼容,可以表示世界上所有的字符,汉字通常用3个字节来表示.GB2312的code page是CP20936.GBK的code page ...

  6. ORM:Chloe

    ORM的一种:Chloe注意实体类模板特色:多表连接 利用chloe实现对各表的增删查改的管理,判断现有物料是否能够支持生产规模. 一开始报错: IQuery<ProductionPlans&g ...

  7. 深度学习之Tensorflow 工程化项目实战 配套资源

    https://www.aianaconda.com/index/CodeProject

  8. Nginx的应用之安装配置

    一.Nginx简述 Nginx是一个开源且高性能.可靠的Http Web服务.代理服务. 开源: 直接获取源代码 高性能: 支持海量并发 可靠: 服务稳定 我们为什么选择 Nginx服务 Nginx非 ...

  9. Hybrid App技术解析 — 原理篇

    Hybrid App技术解析 — 原理篇 原文出处:   https://segmentfault.com/a/1190000015678155 引言 随着 Web 技术和移动设备的快速发展,Hybr ...

  10. Spring中自动装配的模式

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484037.html 自动装配模式 Reference https://docs.spring.io ...