元素居中的两种方法，transform和margin
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的更多相关文章
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- js中如何删除某个元素下面的所有子元素？（两种方法）
js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...
- Qt中的布局浅析与弹簧的使用，以及Qt居中的两种方法
1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- 网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- CSS绝对定位元素居中的几种方法
转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
- JS动态创建元素（两种方法）
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- Selenium webdriver定位iframe里面元素两种方法
以东方财富网登录页面为例: 在查找元素过程中,直接通过id或者xpath等找不到元素,查看页面源代码发现元素是属于iframe里,例如: <div class="wrap_login& ...
随机推荐
- 《PYTHON机器学习及实践－从零开始通往KAGGLE竞赛之路》 分享下载
转: <PYTHON机器学习及实践-从零开始通往KAGGLE竞赛之路> 分享下载 书籍信息 书名: PYTHON机器学习及实践-从零开始通往KAGGLE竞赛之路 标签: PYTHON机器学 ...
- 【图像处理】使用OpenCV+Python进行图像处理入门教程（二）
这篇随笔介绍使用OpenCV进行图像处理的第二章 图像的运算,让我们踏上继续回顾OpenCV进行图像处理的奇妙之旅,不断地总结.回顾,以新的视角快速融入计算机视觉的奥秘世界. 2 图像的运算 复杂的 ...
- C语言之三字棋的简单实现及扩展
C语言之三字棋的简单实现及扩展 在我们学习完数组之后,我们完全可以利用数组相关知识来写一个微小型的游戏,比如说今天所说的--三子棋. 大纲: 文件组成 实现 完整代码展示 扩展 即: 一.文件 ...
- C# 应用 - 使用 WebClient 发起 Http 请求
1. 需要的库类 \Reference Assemblies\Microsoft\Framework\.NETFramework\v4.7.2\System.dll System.Net.WebCli ...
- 翻译：《实用的Python编程》05_02_Classes_encapsulation
目录 | 上一节 (5.1 再谈字典) | 下一节 (6 生成器) 5.2 类和封装 创建类时,通常会尝试将类的内部细节进行封装.本节介绍 Python 编程中有关封装的习惯用法(包括私有变量和私有属 ...
- vue-cli3.0 开发环境构建
vue-cli3.0官网 1.node版本 node版本要求node>=8.9以上(推荐 8.11.0+)使用以下命令查看node版本 node -v 如果不是最新的请到node下载下载最新版本 ...
- python inspect库
一.介绍 inspect模块用于收集python对象的信息,可以获取类或函数的参数的信息,源码,解析堆栈,对对象进行类型检查等等. inspect模块主要提供了四种用处: 对是否是模块.框架.函数进行 ...
- 练习1—参数传递、递归调用（Java）
1.方法参数的值传递机制 1.说明 方法:必须由其所在类或对象调用才有意义.若方法含有参数: 形参:方法声明时的参数: 实参:方法调用时实际传给形参的参数值 Java的实参值如何传入方法:Java里方 ...
- springboot源码解析-管中窥豹系列之BeanPostProcessor（十二）
一.前言 Springboot源码解析是一件大工程,逐行逐句的去研究代码,会很枯燥,也不容易坚持下去. 我们不追求大而全,而是试着每次去研究一个小知识点,最终聚沙成塔,这就是我们的springboot ...
- 微信小程序--简约风博客小程序（基于云开发 - 全开源）
微信小程序--简约风博客小程序(基于云开发 - 全开源) 项目启动纯属突发奇想,想看看博客小程序,例如wehalo博客小程序,但是感觉自建平台还要浪费自己的服务器算力,还没有访问量,省省吧. 本着白嫖 ...