1.transform :translate(-50%,-50%)

<!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>Document</title>

    <style>

        body,

        html {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0

        }

        .box {

            width: 100%;

            height: 100%;

            background: red

        }

        .div1 {

            width: 200px;

            height: 200px;

            background: black;

            position: absolute;

            left: 50%;

            top: 50%;

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

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="div1"></div>

    </div>

</body>

</html>

2.top，bottom,left,right和margin：auto

<!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>Document</title>

    <style>

        body,

        html {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0

        }

        .box {

            width: 100%;

            height: 40%;

            background: red;

            position: relative

        }

        .div1 {

            width: 200px;

            height: 200px;

            background: black;

            position: absolute;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            margin: auto

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="div1"></div>

    </div>

</body>

</html>

元素居中的两种方法，transform和margin的更多相关文章

  1. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  2. js中如何删除某个元素下面的所有子元素？（两种方法）

    js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...

  3. Qt中的布局浅析与弹簧的使用，以及Qt居中的两种方法

    1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式 ...

  4. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  5. 网页元素居中的n种方法

    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...

  6. CSS绝对定位元素居中的几种方法

    转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...

  7. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  8. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  9. Selenium webdriver定位iframe里面元素两种方法

    以东方财富网登录页面为例: 在查找元素过程中,直接通过id或者xpath等找不到元素,查看页面源代码发现元素是属于iframe里,例如: <div class="wrap_login& ...

随机推荐

  1. 栈的数组模拟（非STL）

    #include<bits/stdc++.h> using namespace std; struct zhan{ int s[10000]; int top=0; void zhanpo ...

  2. tcpdump后台抓包并输出给wireshark

    # 先进到/tmp 目录执行,方便Filezila 传输 # 开启抓包 nohup tcpdump -i eth0 -s0 -nnA 'port 22' -w dump22.pcap & [1 ...

  3. 【转载】Android异步消息处理机制详解及源码分析

    PS一句:最终还是选择CSDN来整理发表这几年的知识点,该文章平行迁移到CSDN.因为CSDN也支持MarkDown语法了,牛逼啊! [工匠若水 http://blog.csdn.net/yanbob ...

  4. pytorch（01）环境配置及安装

    pytorch pytorch定位:深度学习框架 人工智能:多领域交叉科学技术 机器学习:计算机智能决策算法 深度学习:高效的机器学习算法 pytorch实现模型训练需要5个模块 数据 将数据从硬盘读 ...

  5. mysql 基本指令 1

    desc 表名  --查看表属性 show create table 表名 \g;  --查看代码 alter table 表名 auto_increment=20;  --改自增的值 MySQL:自 ...

  6. Chrome OS超便捷安装指南

    Chrome OS是一款Google开发的基于PC的操作系统. Google Chrome OS是一款基于Linux的开源操作系统.Google在自己的官方博客表示,初期,这一操作系统将定位于上网本. ...

  7. There only 10 people use the same phone as you（i春秋CTF题解）

      (1)访问网址进行CTF测试,仅出现登陆与注册的页面 (2)进行注册尝试登陆并进行burp抓取数据包: (3)注册成功,进行登陆尝试查看信息是否具有提示,在登录的页面只有两个点击页面,一个为:Ch ...

  8. JS五种绑定彻底弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)

    目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this ...

  9. Mysql将查询结果某个字段以逗号分隔，使用group_concat函数可以实现（配合group by使用）

    示例:SELECT Id, GROUP_CONCAT(Name SEPARATOR ',') Names FROM some_table GROUP BY id

  10. 《逆向工程核心原理》——IAThook

    hook逻辑写入dll中,注入dll. #include "pch.h" #include <tchar.h> #include "windows.h&quo ...