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. how to prevent lowmemorykiller from killing processes

    Hi there, I've upgraded a number of test systems to the latest Saucy beta. I've seen quite a few cas ...

  2. vue - blog开发学习5

    基本功能和后台联调 1.首页的所有博客 因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable proxyTable: { '/a ...

  3. 49.Kth Largest Element in an Array

    Level:   Medium 题目描述: Find the kth largest element in an unsorted array. Note that it is the kth lar ...

  4. 43.Word Break(看字符串是否由词典中的单词组成)

    Level:   Medium 题目描述: Given a non-empty string s and a dictionary wordDict containing a list of non- ...

  5. android ListView列表显示数据

    item.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and ...

  6. SQL查询连续年份

    有这样一个问题,给出一个表格记录了夺冠球队的名称和年份,我们要做的就是写出一条SQL语句,查询再次期间连续夺冠的有哪些,起止时间是什么 下边是代码 create table #t(TEAM vaarc ...

  7. python的logging,将log保存到文件

    import logging logging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s[line:%(line ...

  8. 查看tomcat的版本号

    本经验主要介绍在windows下,如何查看tomcat的版本号. 工具/原料 安装了tomcat server的操作系统. 一.绿色版tomcat版本查看--命令catalina version 或者 ...

  9. Qt installer framework学习

    一.官网的介绍部分网址 http://doc.qt.io/qtinstallerframework/ifw-overview.html 二.安装界面介绍 2.1 安装界面流程 介绍>>选择 ...

  10. 洛谷P1364 医院设置(Floyd)

    题目描述 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接点之间的距离为l.如上 ...