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 固定宽高 水平垂直居中方法的更多相关文章

  1. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  2. css3不定宽高水平垂直居中

    1 justify-content:center;//子元素水平居中 2 align-items:center;//子元素垂直居中 3 display:-webkit-flex; 在父级元素上面加上上 ...

  3. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  4. div水平垂直居中方法及优缺点

    代码: <div class="father"> <div class="son"> </div></div> ...

  5. CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  6. css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  7. 固定宽高的DIV绝对居中示例

    看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数, ...

  8. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  9. 第4天:JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

随机推荐

  1. underscorejs-max学习

    2.15 max 2.15.1 语法: _.max(list, [iteratee], [context]) 2.15.2 说明: 返回list中的最小值. list为集合,数组.对象.字符串或arg ...

  2. javascript 判断是否是PC还是手机端

    function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android" ...

  3. ES聚合实例

    在es中需要根据app_categor进行聚合,JSON查询语句如下: { "query": { "bool": { "must": [ { ...

  4. java 面试

        115个Java面试题和答案——终极列表(上) 本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一 ...

  5. h.264 FMO

    在H.264之前的标准中,比如H.263,其比特流中的数据是按照一个宏块接一个宏块的方式排列的,一旦发生丢包,很多相邻宏块信息都会丢失,很难进行错误隐藏处理.在H.264中加入了一项新特性:把宏块在比 ...

  6. SignTool.exe(签名工具)

    水漂收集 -- SignTool.exe(签名工具) =============C#.Net 篇目录============== 签名工具是一个命令行工具,用于用证书对文件进行数字签名,验证文件和时间 ...

  7. 7.2 Database Backup Methods 数据备份方法:

    7.2 Database Backup Methods 数据备份方法: 本节总结了一些常用的备份方法: 使用MySQL Enterprise Backup 进行Hot Backup MySQL Ent ...

  8. BZOJ1660: [Usaco2006 Nov]Bad Hair Day 乱发节

    1660: [Usaco2006 Nov]Bad Hair Day 乱发节 Time Limit: 2 Sec  Memory Limit: 64 MBSubmit: 606  Solved: 289 ...

  9. 【数学】HDU 5761 Rower Bo

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5761 题目大意: 船在(0,a),船速v1,水速v2沿x轴正向,船头始终指向(0,0),问到达(0, ...

  10. win7 清理系统

    1. 先用CCleaner等第三方软件清理一下.2. 将用户文件.我的文档.我的音乐.我的视频.桌面等路径更改到非系统分区(文件也会一并移动过去)3. 将系统盘的系统还原占用空间比减小,将大部分虚拟内 ...