<!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. 实现Modbus ASCII多主站应用

    1.更新设计关于原来的协议栈在Modbus ASCII主站应用时所存在的局限性与Modbus RTU也是一样的,所以我们不分析它的不足,只讨论更新设计.我们将主站及其所访问的从站定义为通用的对象,而当 ...

  2. 想要远程服务器长时间挂机不断开ssh连接的技巧

    使用top命令挂着就好了,top命令执行的“查看系统进程和资源占用”的任务会一直输出动态的数据,一直有数据传输就不会因为长时间挂机而断开ssh链接了,尤其针对于海外服务器,因为高延迟经常出现挂机久了自 ...

  3. SUSE 11 SP3 搭建weblogic服务

    环境的搭建和业务需求相关,仅供参考 环境: SUSE 11 SP3 安装步骤 创建一个weblogic组 创建一个用户名为weblogic的用户, 创建相关目录 上传jdk,脚本等 安装 创建用户及其 ...

  4. spotlight on mysql 监控

    . 安装 下载地址:https://pan.baidu.com/s/1qYi3lec 官网地址——https://www.quest.com/common/registration.aspx?requ ...

  5. shell常用语法

    for.if条件: https://blog.51cto.com/qiufengsong/1252889 一.for循环: );do echo $i done ###第一行:seq是指1到10,第二行 ...

  6. windows系统通过命令行查看配件的详细信息

    今天我在工作中遇到这样一个问题:客户服务器用的是win 2012系统,不打开机箱,不借助其他类似于鲁大师软件的情况下查看内存条的详细信息 刚开始的时候我通过systeminfo命令,只能查出来总的内存 ...

  7. 编码GBK和GB2312、Unicode、UTF-8

    一.编码GBK和GB2312 随着计算机发展,各国已经不满足于单纯用ASCII码: 对于我们来说能在计算机中显示中文字符是至关重要的,所以我们还需要一张关于中文和数字对应的关系表: 一个字节8位二进制 ...

  8. 5G的前景以及意义

    首先来介绍一下5G:5G网络是第五代移动通信网络,其峰值理论传输速度可达每8秒1GB,比4G网络的传输速度快数百倍.举例来说,一部1G的电影可在8秒之内下载完成. 5G的技术原理是:三星电子通过研究和 ...

  9. 【ZOJ 4060】Flippy Sequence

    [链接] 我是链接,点我呀:) [题意] [题解] 按照两个区间的排列方式 我们可以分成以下几种情况 会发现这两个区间的作用 最多只能把两段连续不同的区间变为相同. 那么写个for处理出连续不相同的一 ...

  10. Aizu/Aoj 0121 Seven Puzzle

    这题应该算是经典的八数码问题的弱化版吧:给你一个4x2的方版,上面有0-7 八个数字,每次只能让编号0的方格跟他的上下左右的方格交换:所以也就是把方格0当做空格看待,每次只有空格周围的方格能够向空格处 ...