<!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. Windows上架设自己的ssh代理 — copSSH

    最近网上对ssh代理讨论的比较多, 主要是为了穿墙. 其实在自己的电脑上也可以架设ssh代理, 当然国内自己架的不具有FQ功能, 如果你有国外朋友或是远程win服务器…则可以用此方法架设私有代理. 其 ...

  2. NW.js构建PC收银端安装程序的指南

    1.首先下载nw.js的SDK: https://nwjs.org.cn/download.html 2.SDK目录下新建myapp文件夹: 3.myapp文件夹内新建package.json文件: ...

  3. 被遗忘的 Logrotate

    转自: http://huoding.com/2013/04/21/246 被遗忘的 Logrotate 发表于 2013-04-21 我发现很多人的服务器上都运行着一些诸如每天切分 Nginx 日志 ...

  4. C#第十五节课

    函数复习 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System. ...

  5. CentOS安装新版RabbitMQ解决Erlang 19.3版本依赖

    通过yum等软件仓库都可以直接安装RabbitMQ,但版本一般都较为保守. RabbitMQ官网提供了新版的rpm包(http://www.rabbitmq.com/download.html),但是 ...

  6. 《奋斗吧！菜鸟》 第八次作业：Alpha冲刺 Scrum meeting 5

    项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11012922.html 团队名称 奋斗吧!菜鸟 作业学习目标 A ...

  7. php unlink()函数使用

    最近在写个网站,需要上传图片,如果修改图片,就图片就没有用了,会占用服务器的硬盘资源,所以想到用unlink函数删除旧照片. 问题 : unlink函数只能删除 相对于函数执行文件的相对目录  或  ...

  8. Windows 安装react native

    1.下载node.js (https://nodejs.org/en/) 2.安装node.js,安装完成后按住 图标键+R ,输入CMD进入命令行终端,输入npm -v C:\Users\Admin ...

  9. MySQL 索引分析

    MySQL复合唯一索引分析 关于复合唯一索引(unique key 或 unique index),网上搜索不少人说:"这种索引起到的关键作用是约束,查询时性能上没有得到提高或者查询时根本没 ...

  10. C#--进程-线程

    线程 线程也被称为轻量级进程lightweight process ,LWP,线程是CPU独立调度和分派的基本单位,同一个进程中的多个线程将共享该进程中的全部系统资源,多线程共享堆heap资源,c#程 ...