子元素位于父元素中央 css实现
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实现的更多相关文章
- css使子元素在父元素居中的各种方法
html结构: <div class="parent"> <div class="child"></div> </di ...
- 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- WPF XMAL获取元素的父元素,子元素
/// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...
- margin (子元素远离父元素边框)
如果父盒子没有设置border框着,那么他的子元素无法利用margin-top 来远离父元素的上边框 如果使用了margin-top会使子元素和父元素一起往下移 (子想离,父不设置border边框 则 ...
- ie10中元素超出父元素的宽度时不能自动隐藏
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...
- 让子元素在父元素中水平居中align-items
做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元 ...
- justify-content 定义子元素在父元素水平位置排列的顺序
justify-content 定义子元素在父元素水平位置排列的顺序,需要和display:flex使用才会生效. 有五个属性: 1.flex-start(默认值) 左对齐 2.flex-end 右 ...
随机推荐
- firmware
路由器固件分析题,首先要安装firmware-mod-kit 安装命令: linux> sudo apt-get install git build-essential zlib1g-dev l ...
- C#编程--第二天
一.变量:变量先声明,后赋值,再使用. 语法:变量类型 变量名=值: 变量类型: 分为基本数据类型和引用类 基本数据类型:整型.浮点型.字符型.布尔型 引用类:字符串.日期时间.枚举类型.结构类型 i ...
- css3--文字效果
text-shadow <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- ReactNative 遇到的问题汇总
1.react-native 启动项目出现如下报错 解决方法: nvm install v9.0.0 nvm alias default v9.0.0
- Cascade R-CNN目标检测
成功的因素: 1.级联而非并联检测器 2.提升iou阈值训练级联检测器的同时不带来负面影响 核心思想: 区分正负样本的阈值u取值影响较大,加大iou阈值直观感受是可以增加准确率的,但是实际上不是,因为 ...
- 在scite编辑器中使用astyle格式化c代码
用 vc6 很喜欢 alt+F8 的功能. 能够格式化代码. scite 没有这个功能. 今天看它的配置文件发现这么两行: command.name.0.*.cxx=Indent command.0. ...
- JavaSE---多线程---集合类
1.概述 1.1 Java提供的ArrayList.LinkedList.HashMap等都是线程不安全的类,如何解决: 1.1 使用Collections类提供的方法将 其 包装成线程安全类: ...
- 阿里云 Centos 7 PHP7环境配置 LNMP
首先更新系统软件 $ yum update 安装nginx 1.安装nginx源 $ yum localinstall http://nginx.org/packages/centos/7/noarc ...
- VIM的一些使用积累
替换: :s/cst/dst/gc 黏贴后格式不对齐: gg=G 全选并黏贴 gg :"+yG
- mysql中int的长度与值的问题
我们在数据库中设置一个int类型,设置好长度,然后会发现并没有受到长度的限制,这是因为,int值的范围和这个长度根本没有关系. int的存储大小是4个字节(B), 计算机存储单位的换算: 1B=8b ...