CSS 控制元素 上下左右居中
此文章为转载,目的是自己好参考
左右居中:
#method.
-->. margin:0 auto;
效果图:
上下居中:
在介绍方法之前,我先声明一下, 这里的 上下居中法,都是已知 height的,总结分两种情况,1. 具体height 和 2.百分比height,但无论哪种形式的height,应该都可以归为 已知height。 下面说一说,百分比height 的两种需要注意的情景:
情景一:position:absoute; top:0; left:0; width:xx%;height:xx%; (position:absolute;-->生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。) 所以,它的百分比height = 相对于 static 定位以外的第一个父元素的height;
情景二:position:fixed; top:0;left:0;width:xx%;height:xx%; (position:fixed;-->生成绝对定位的元素,相对于浏览器窗口进行定位。) 所以,它的 百分比height = 相对于浏览器窗口高度的height;
通过以上的 声明分析,我总结的 上下居中,总体上分为 四种方法,针对 两种场景:
两种场景:
1. 未脱离文档流 定位的元素(position:static || relative)
2. 脱离文档流 定位的元素(position: absolute || fixed)
ok,该了解的都了解了,下面进入正题,介绍方法。
#Method1.
-->. 子容器绝对定位,top:0,bottom:0,margin:auto
即,父元素 用相对定位, 子元素 用绝对定位(relative --> absolute),上代码:
-->. 优点:设置起来比较简单,使用范围较广;
-->. 缺点:需要子容器有一个固定的高,或百分比自适应于外部。它的高度不能是height:auto; 兼容性 IE8+;
效果图:
#method2.
-->. 子容器相对定位,top:50%,translateY(-50%)
即,父元素 用相对定位,子元素 用相对定位(relative --> relative),上代码:
-->. 优点:只设置子元素的属性即可,无需过多计算;
-->. 缺点:应用到了CSS3的translateY,所以 兼容性 IE9+;
效果图:
#method3.
-->. 子元素1:float, 子元素2:clear:both; floter元素的margin-bottom值 = content的height的值的负一半
-->. 优点:position:relative;时,无需声明 父元素的定位
-->. 缺点:需要一个同子元素 同级的 float元素辅助;
需要手动计算 float元素的 margin-bottom 的值;
效果图:
#method4.
-->. 子元素绝对定位,top:50%; margin-top:-(自身高度的一半);
-->. 优点:只操作子元素的css属性,较为简单
-->. 缺点:子元素 和 父元素都需要设置position;
需要手动计算 margin-top 的值;
以上文章参考地点:http://www.cnblogs.com/cnblogs-jcy/p/6074899.html
转载于:https://www.cnblogs.com/oldZhangFeng/p/7248073.html
CSS 控制元素 上下左右居中相关推荐
- 6种CSS控制元素上下居中效果
通常我们用到的css布局都是左右居中,经典css写法如下: body{ margin:0; padding:0; width:100%; height: ...
- CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式 假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...
- 用CSS让DIV上下左右居中的方法
例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格单元格的居中属性. 步骤 ...
- 码匠编程:CSS让元素绝对居中,你知道几种方法?
经常碰到有同学在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参考,如有不足之处,请大家补充 问题描述: 给定两个元素,这两个元素是父子级关 ...
- 小程序 背景图片样式 阴影 子元素上下左右居中 上下居中 左右居中
小程序 css3 常用的一些样式: 一. 背景颜色半透明 1. 透明背景颜色样式 background:rgba(0,0,0,0.5); 2. 背景图片样式 background-image: url ...
- 伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式,实用又简单!...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...
- css中如何居中一个浮动元素,css浮动元素的居中的例子
居中对于大家来说指的是页面了,此时我们通常使用提50%来实现了,下面来看一个css浮动元素的居中的例子,希望例子对各位有用. 关于浮动元素的居中,其实不太常用,但为了应付某些奇葩的面试官,也要知道怎么 ...
- div内上下左右距离_用CSS让DIV上下左右居中的方法
当父div的行高等于自身高度时,内部的行内元素会上下居中显示.行内块没有固定高度时也会上下居中显示.所以需要对父div的 line-height 进行调整.利用定位属性(top.left.right. ...
- 元素上下左右居中的几种方法
定位居中1 让外层div相对定位(得设置宽高),内层div绝对定位,top.left分别设为50%,然后通过设置margin-top.margin-left值为宽度的负数并且是内层div的一半,就可以 ...
最新文章
- 2021-08-31 openCV批量读取把 path0 里面的与 path 同名文件(.jpg)提取出来,然后生成.png放进 path1 路径里面
- 【云栖大会】阿里云生态 开启智能“大航海时代”
- R语言实现金融数据的时间序列分析及建模
- mysql 亿级_mysql 亿级数据量 ( sum ,group by )的优化
- 拼多多发布一季度廉正白皮书:已移送公安机关3人 开除6人
- Android深度探索第五章总结
- 基于40万表格数据集TableBank,用MaskRCNN做表格检测
- SPSS统计指南【SPSS 003期】
- pr视频两边模糊_干货!Pr教程:如何在视频中添加模糊效果?
- 数据库的那些乱七八糟烦人的锁(数据库锁机制有这一篇就够了)
- 怎么在Windows系统中制作Mac系统U盘启动盘?
- USB大容量存储设备禁用后恢复不了问题解决方案
- 解决allegro 中OUT OF DATE SHAPES问题
- 基于vue+百度地图的多车实时运动及轨迹追踪实现(上帝视角篇)
- Java虚拟机启动整体流程和基础学习(内容很多,不可快餐阅读),推理+源码论证
- 实体企业践行远程办公,云ERP是您变革利器
- 如何做快手副业?怎么在快手上赚工资?快手发视频怎么赚钱?
- Matlab提取矩阵行数与列数
- flowable-bpmn2添加自定义节点属性
- Vue packages version mismatch: - vue@2.6.11 vue-template-compiler@2.6.10 的解决办法