<!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. 点击button 触发另一个button 事件

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs&quo ...

  2. Redis 之string结构及命令详解

    1.set  key  value  ex  秒数   px  毫秒数  nx / xx  设置一个值,注:ex 与 px 同时存在时,取写在后面的一个为有效期,nx表示key不存时设置成功,xx表示 ...

  3. Java 将File转换为MultipartFile类型

    首先转换时需要用到commons-fileupload-1.3.2.jar包,若项目中没有就先加入jar包,实现代码如下: 1.根据File创建FileItem import java.io.File ...

  4. LINUX - getopts

    getopts optionString opt; optionString :所有参数组成的-参数串: opt:从optionString 每次取的参数值: 当optionString用[:]开头, ...

  5. Day 2 语言元素

    1.变量和类型 在程序设计中,变量是一种存储数据的载体.计算机中的变量是实际存在的数据或者说是存储器中存储数据的一块内存空间,变量的值可以被读取和修改,这是所有计算和控制的基础.计算机能处理的数据有很 ...

  6. 线程同步、信号量、system v IPC

    一.线程同步 条件变量 什么是条件变量? 线程A等待某个条件成立,条件成立,线程A才继续向下执行.线程B的执行使条件成立,条件成立以后唤醒线程A,以继续执行.这个条件就是条件变量. pthread_c ...

  7. 洛谷P1101 单词方阵【DFS】

    给一n \times nn×n的字母方阵,内可能蕴含多个"yizhong"单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着 88 个方向的任一方向,同一单词摆放时不再改变方向 ...

  8. python-if判断

    1. python 条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何 ...

  9. PHP循环输出二维数组的数据

    //下面是一个例子$g_id = isset($_GET['id'])?$_GET['id']:'1';//定义变量$g_id,使用三元运算符是为了避免出现waring $p_id = ($g_id& ...

  10. 【codeforces 798C】Mike and gcd problem

    [题目链接]:http://codeforces.com/contest/798/problem/C [题意] 给你n个数字; 要求你进行若干次操作; 每次操作对第i和第i+1个位置的数字进行; 将 ...