flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中)
(1).position :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style type="text/css">
* {
margin: 0;
padding: 0;
} #wrap {
width: 500px;
height: 500px;
background: grey; //新版本flex方法
display: flex;
justify-content: center; //主轴
align-items: center; //侧轴 //旧版本的flex版本
display: -webkit-box;
-webkit-box-pack: center; //主轴
-webkit-box-align: center;//侧轴 // position: relative;
}
#box{
width: 200px;
height: 200px;
background: deeppink;
position: absolute; //第一种垂直居中法
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; //第二种垂直居中法 top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px; //第三种垂直居中法 top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');
}
</script>
</html>

  

05. flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中)的更多相关文章

  1. 一个label两种颜色,一个label两种字体

    -(void)addLabel{ UILabel *label = [[UILabel alloc]init]; label.backgroundColor = [UIColor grayColor] ...

  2. controller 有两种写法,讨论一下两种写法的区别:

    controller 有两种写法,讨论一下两种写法的区别: 写法 1: app.controller('myCtrl', function($scope, $location) { $scope.my ...

  3. Flex弹性盒模型(新老版本完整)--移动端开发整理笔记(二)

    Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...

  4. TensorFlow笔记三:从Minist数据集出发 两种经典训练方法

    Minist数据集:MNIST_data 包含四个数据文件 一.方法一:经典方法 tf.matmul(X,w)+b import tensorflow as tf import numpy as np ...

  5. js给数字加三位一逗号间隔的两种方法(面试题)

    方法一:   <script type= "text/javascript"> //保留三位小数,toLocaleString() 方法可把一个 Number 对象转换 ...

  6. ie 9 position:fixed 无效的两种情况

    第一种情况: 运行发现在Google Chrome,FireFox都可以的,但是在IE9就不行了很是郁闷,因为IE6以上的版本都是支持fixed的属性的:上网上找了好久没找到,因为不知道关键字该怎么搜 ...

  7. 三:flask-配置文件的两种方式

    项目中,配置的参数一般采用配置文件的形式,方便统一管理 第一种方式:模块的形式:使用app.config.from_object(config)的方式加载配置文件,此方式需要导入配置文件视为模块 第二 ...

  8. Docker学习系列(三)Docker搭建gitlab的两种方式

    一.直接下载docker-ce 1.拉取gitlab/gitlab-ce Randy:~ Randy$ docker pull gitlab/gitlab-ce Using default tag: ...

  9. js里实现给数字加三位一逗号间隔的两种方法

    方法一: <script  type= "text/javascript"> var   num_s = "1232134456.546 ";ale ...

随机推荐

  1. SQL 数据库 学习 005 学习必备的一些操作 --- 如何新建数据库 如何附加和分离数据库(如何备份还原数据库) 如何删除数据库

    我的电脑系统: Windows 10 64位 使用的SQL Server软件: SQL Server 2014 Express 如果我们要学习这个数据库,我们需要学习什么知识.比如:如何新建一个数据库 ...

  2. Ajax定时局部刷新

    1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...

  3. C++细节理解

    1.为什么static类外初始化不需要static关键字 答:因为类外static变量或函数表示限定在此源文件中才能使用,而类中的static变量或函数表示由本类及其所有对象共享,如果在类外初始化或定 ...

  4. [C++] struct memory allocation

    MAX-byte alignment (最大单位对齐) typedef struct user USER; typedef struct employee E; struct user{ ]; //t ...

  5. Python设计模式之"外观模式"实例讲解

    Python中设计模式之外观模式主张以分多模块进行代码管理而减少耦合,下面用实例来进行说明. 应用特性: 在很多复杂而小功能需要调用需求时,而且这些调用往往还有一定相关性,即一调用就是一系列的. 结构 ...

  6. [SoapUI] Global Scripts For Reusability

  7. [SoapUI] 在某个测试步骤下面增加Script Assertion,运用 messageExchange 获取response content

    import com.eviware.soapui.support.GroovyUtils import com.eviware.soapui.support.XmlHolder import org ...

  8. console对象的理解

    console对象代表浏览器的JS控制台,虽然不是标准,但已经成为事实的标准 console对象的作用 a.显示代码运行错误信息 b.提供一个命令行接口,用来与网页互动 console对象拥有很多方法 ...

  9. 淘宝IP地址库

    淘宝官方ip地址库 http://ip.taobao.com/ 接口说明 1. 请求接口(GET): http://ip.taobao.com/service/getIpInfo.php?ip=[ip ...

  10. 【小梅哥SOPC学习笔记】设置Eclipse在编译(build)前自动保存源代码文件

    设置Eclipse在编译(build)前自动保存源代码文件 Eclipse 常用设置之让Eclipse在编译(build)前自动保存源代码文件 一.让Eclipse在编译(build)前自动保存源代码 ...