div 固定宽高 水平垂直居中方法
div固定宽高，水平垂直居中，根据所用单位不同，分成两种情况，分别是“px”和“%”情况。
例：将三层div做出三个边框，要求水平垂直居中。效果如图
- 情况一（单位是px时）：
只需要用绝对定位到屏幕中间，然后利用margin-left和margin-top取值就可以实现。
<style type="text/css">
.a {
border: 1px solid #00caca;
width: 900px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -450px;
margin-top: -250px;
display: flex; //flex让内部div水平垂直居中
flex-direction: row;
justify-content: center;
align-items: center;
}
.b {
border: 1px solid #00cacc;
width: 80%;
height: 70%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.c {
border: 1px solid #00fffb;
width: 60%;
height: 60%;
}
<body>
<div class="a">
<div class="b">
<div class="c">ssssss</div>
</div>
</div>
</body>
- 情况二（单位是%）：
由于%是基于父元素宽高，采用margin-left值为负本身宽高一半失效，因此，需要计算定位top 和 left值，使其居中。代码如下，其中，HTML结构不变。
<style type="text/css">
body {
width: 100%; //需要给body设置宽高
height: 100%;
}
.a {
border: 1px solid #00caca;
width: 80%;
height: 80%;
position: absolute;
top: 10%; //根据自身宽高占body的80%，推算定位top值
left: 10%; //同上
margin-left: 0;
margin-top: 0; display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.b {
border: 1px solid #00cacc;
width: 80%;
height: 70%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.c {
border: 1px solid #00fffb;
width: 60%;
height: 60%;
}
</style>
div 固定宽高 水平垂直居中方法的更多相关文章
- table 与 div 固定宽高问题
div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...
- css3不定宽高水平垂直居中
1 justify-content:center;//子元素水平居中 2 align-items:center;//子元素垂直居中 3 display:-webkit-flex; 在父级元素上面加上上 ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- div水平垂直居中方法及优缺点
代码: <div class="father"> <div class="son"> </div></div> ...
- CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- 固定宽高的DIV绝对居中示例
看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数, ...
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- 第4天：JS入门-给div设置宽高背景色
今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...
随机推荐
- Python标准库--os模块
这个模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.即它允许一个程序在编写后不需要任何改动,也不会发生任何问题,就可以在Linux和Windows下运行.一个例 ...
- Eclipse中使用Maven创建Servlet3.0 Web 项目
摘要 Apache Maven是一个优秀的项目构建和管理工具,许多开源项目都使用Maven进行构建.由于最近工作中要用到Maven,于是这里记录下在Eclipse中使用Maven插件创建一个基于Ser ...
- tornado项目
tornado项目之基于领域驱动模型架构设计的京东用户管理后台 本博文将一步步揭秘京东等大型网站的领域驱动模型,致力于让读者完全掌握这种网络架构中的“高富帅”. 一.预备知识: 1.接口: pytho ...
- 符合altium designer操作习惯的cadence快捷键设置
本人开始学习画PCB的时候,用的都是protel,后来转投altium desinger,因为这两个软件上手快且大学里教的也就是这两种.但由于工作需要换成cadence,这就给我造成了很大的困扰,尤其 ...
- ISO15693协议的Inventory
ISO15693的Inventory指令看起来比较让人迷糊,想明白其流程,我认为以下几点是必须了解的: 第一.ISO15693标签的几种状态,资料上有,这里罗嗦重复一下: 1.PowerOff状态 2 ...
- KEIL C编译器常见警告与错误信息的解决办法
对于函数的自变量.局部变量和全局变量声明如果没有指定内存类型,则内存模式将成为内定的内存类型.如果指定了内存类型的变量,则不理会内存模式,完全有所指定的内存类型为主. SMALL模式:小模式 ...
- android 多线程断点续传下载
今天跟大家一起分享下Android开发中比较难的一个环节,可能很多人看到这个标题就会感觉头很大,的确如果没有良好的编码能力和逻辑思维,这块是很难搞明白的,前面2次总结中已经为大家分享过有关技术的一些基 ...
- Delphi TcxTreeList 怎们显示下拉列表
TcxTreeList 怎们显示下拉列表, 操作如下: 1.定义一个TStringlist中存储你的信息. 2.然后选定在TcxTreeList的哪个列要变成TCombobox, 如下图: 3. ...
- LeetCode——Remove Duplicates from Sorted Array
Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...
- Linux下aMule安装教程
Linux下载神器aMule安装教程 aMule可以说是Linux下的电驴,你们说eMule是不是就是aMule的Windows版呢?也是开源的. Fedora安装aMule很简单,两条命令就搞定. ...