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. Java学习----对象的状态和行为

    1.什么是对象 对象是已知的事物 对象会执行动作 类是对象的蓝图 2.对象的属性和状态 使用变量来描述 private String name; private int age; private St ...

  2. python序列化之pickle

    来自引用: 1.什么东西能用pickle模块存储? 所有Python支持的 原生类型 : 布尔, 整数, 浮点数, 复数, 字符串, bytes(字节串)对象, 字节数组, 以及 None. 由任何原 ...

  3. laravel框架——学习笔记

    routes.php文件创建路由参数由{}包起来,不需要$ Route::get('/stu/{as}','StuController@show'); 在相对应的Controller创建funcito ...

  4. codevs 3269 混合背包

    题目描述 Description 背包体积为V ,给出N个物品,每个物品占用体积为Vi,价值为Wi,每个物品要么至多取1件,要么至多取mi件(mi > 1) , 要么数量无限 , 在所装物品总体 ...

  5. zend framework 1 连接oracle数据库的写法

    1 用Zend_Db_Adapter_Pdo_Oci方式 $config =array( 'host'=>'192.168.5.40', 'port'=>'1521', 'dbname'= ...

  6. [项目构建 十三]babasport Nginx负载均衡的详细配置及使用案例详解.

    在这里再次说明下, 这个项目是从网上 找到的一套学习资料, 自己在 空闲时间学习了这些东西. 这里面的code当然会有很多不完善的地方, 但是确实也能学到很多新东西.感谢看过这一些列博文和评论的小伙伴 ...

  7. library cahce pin

    library cahce pin(库高速缓存pin)等待事件与库高速缓存并发性有关,当会话尝试在库高速缓存中钉住对象 以修改或检查该对象时产生该事件.会话必须获取(pin)以确保此时对象没有被其他会 ...

  8. 【HDOJ】1053 Entropy

    构造huffman编码,果断对字符进行状态压缩. #include <iostream> #include <cstdio> #include <cstring> ...

  9. 产生文件命令touch,echo,cat<<EOF>test,less,more,tail,head

    . 输出命令 echo,cat,管道(|),tee,重定向(>, >>)等 . 创建一个文件:用 touch.echo.cat.tee, 重定向(>, >>)等 [ ...

  10. WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞

    漏洞名称: WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞 CNNVD编号: CNNVD-201306-259 发布时间: 2013-06-20 更新时间 ...