<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>关于div居中</title>

</head>

<style type="text/css">

    html,

    body {

        height: 100%;

    }

    .div1 {

        width: 60%;

        height: 40%;

        border: 1px solid #000000;

    }

    .div2 {

        width: 40%;

        height: 45%;

        background-color: green;

    }

</style>

<body>

    <div class="div1">

        <div class="div2">

        </div>

    </div>

</body>

</html>

一、绝对定位

　　

.div1 {

     position: relative;

 }

.div2 {

     margin: auto;

     position: absolute;

     top: 0;

     bottom: 0;

     left: 0;

     right: 0;

 }

二、translate

　　

.div2 {

     position: relative;

     top: 50%;

     left: 50%;

     transform: translate(-50%, -50%);

 }

三、flex

　　

.div1 {
　　　　display: flex;
　　　　justify-content: center;
　　　　align-items: center;
    }

　　

关于百分比宽高div居中并垂直居中问题的更多相关文章

  1. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  2. css固定宽高DIV内部元素垂直居中的方法

    应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...

  3. absolute和relative元素 设置百分比宽高的差异

    一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...

  4. 007. 自定义ListBox的item的宽高, 字体居中

    /// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...

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

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

  6. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  7. table-cell设置宽高、居中

    table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { co ...

  8. div居中和垂直居中的最简单方法

    div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...

  9. 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

随机推荐

  1. MVC 返回404,返回图片,流到数组,apk信息

    return HttpNotFound(); byte[] buffer0 = QRCode(); return File(buffer0, @"image/jpeg"); // ...

  2. React Native - 使用Geolocation进行定位（获取当前位置、监听位置变化）

    1,getCurrentPosition()方法介绍 static getCurrentPosition(geo_success, geo_error?, geo_options? 该方法用于获取当前 ...

  3. Math工具类的使用

    1.包:java.lang  不需要导包 2.Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数. 特点: 该类中的方法都是静态方法,所以可以直接使用类名.方法名(实参)调 ...

  4. [转载]windows下github 出现Permission denied (publickey).解决方法

      今天在学习github的时候遇到了一些问题,然后爬了一会,找到了解决方法记录下来,以防忘记,当然能帮助别人最好啦! github教科书传送门:http://www.liaoxuefeng.com/ ...

  5. vue中引入json数据，不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  6. 如何查看系统的界面,比如费用申请单的序时簿界面引用的是哪一个ListUi.快捷键alt+shift+d 然后选中该ListUI大框框,就可以看到引用的是哪一个了.

    如何查看系统的界面,比如费用申请单的序时簿界面引用的是哪一个ListUi.快捷键alt+shift+d 然后选中该ListUI大框框,就可以看到引用的是哪一个了.

  7. nyoj113-字符串替换

    字符串替换 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 编写一个程序实现将字符串中的所有"you"替换成"we" 输入 输入包 ...

  8. elasticsearch 分析器阅读笔记(五)

    倒排索引 可以查看这里得分词原理https://www.cnblogs.com/LQBlog/articles/5743991.html 分析器 分析器处理过程的3步骤 1.字符过滤器:去除字符的特殊 ...

  9. MySQL Migration Toolkit v2.1特别版

    MySQL数据库转换工具MySQL Migration Toolkit v2.1特别版 支持mssql\oracle\access\excel与mysql互换 可以将任何数据源转换成mysql的数据, ...

  10. ubuntu--Supervisor的简单使用

    安装,这个程序使用python写的 sudo apt-get install supervisor 配置一个你需要的配置文件 //进入 /etc/supervisor/conf.d文件目录,配置一个r ...