05. flex元素水平垂直居中（三种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水平垂直居中和两种新老版本水平垂直居中）的更多相关文章
- 一个label两种颜色，一个label两种字体
-(void)addLabel{ UILabel *label = [[UILabel alloc]init]; label.backgroundColor = [UIColor grayColor] ...
- controller 有两种写法，讨论一下两种写法的区别：
controller 有两种写法,讨论一下两种写法的区别: 写法 1: app.controller('myCtrl', function($scope, $location) { $scope.my ...
- Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）
Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...
- TensorFlow笔记三：从Minist数据集出发 两种经典训练方法
Minist数据集:MNIST_data 包含四个数据文件 一.方法一:经典方法 tf.matmul(X,w)+b import tensorflow as tf import numpy as np ...
- js给数字加三位一逗号间隔的两种方法（面试题）
方法一: <script type= "text/javascript"> //保留三位小数,toLocaleString() 方法可把一个 Number 对象转换 ...
- ie 9 position:fixed 无效的两种情况
第一种情况: 运行发现在Google Chrome,FireFox都可以的,但是在IE9就不行了很是郁闷,因为IE6以上的版本都是支持fixed的属性的:上网上找了好久没找到,因为不知道关键字该怎么搜 ...
- 三：flask-配置文件的两种方式
项目中,配置的参数一般采用配置文件的形式,方便统一管理 第一种方式:模块的形式:使用app.config.from_object(config)的方式加载配置文件,此方式需要导入配置文件视为模块 第二 ...
- Docker学习系列（三）Docker搭建gitlab的两种方式
一.直接下载docker-ce 1.拉取gitlab/gitlab-ce Randy:~ Randy$ docker pull gitlab/gitlab-ce Using default tag: ...
- js里实现给数字加三位一逗号间隔的两种方法
方法一: <script type= "text/javascript"> var num_s = "1232134456.546 ";ale ...
随机推荐
- nodejs、webpack
开发环境,直接本机下载代码回来,装好nodejs.webpack(安装方法 npm install webpack -g), 切换到项目根目录下 1.安装依赖:npm install 2.执行webp ...
- 面向对象的JavaScript-001
一. Question是父类,MultipleChoiceQuestion和DragDropQuestion是子类 二. 1. <script> // 面向对象 function Ques ...
- 数字图像处理：基于MATLAB的车牌识别项目 标签： 图像处理matlab算法 2017-06-24 09:17 98人阅读 评论(0)
学过了数字图像处理,就进行一个综合性强的小项目来巩固一下知识吧.前阵子编写调试了一套基于MATLAB的车牌识别的项目的代码.今天又重新改进了一下代码,识别的效果好一点了,也精简了一些代码.这里没有使用 ...
- （转）C#中的 Interfaces (For 初学者们)
http://blog.sina.com.cn/s/blog_574c993d0100d59n.html
- Linux下软件常见安装方式
pasting 分类: Linux2007-12-08 16:31 1909人阅读 评论(0) 收藏 举报 linuxredhat脚本文档managerfile Linux下软件安装主 ...
- [GO]空接口
package main import "fmt" //空接口的实际意义就在于在使用函数时,空接口可以接收任意类型的值,类似于python中的*args, **kwargs fun ...
- 手动添加ceph的mds
1.在需要安装的目标机器上创建mds目录 mkdir -p / 2.生成mds的keyring,并将其写入/var/lib/ceph/mds/ceph-0/keyring文件中 ceph auth g ...
- ceph中pool的管理
1.创建pool 创建ceph pool的命令如下,它的参数包括pool名字.PG和PGP的数量. 若少于5个OSD, 设置pg_num为128. 5~10个OSD,设置pg_num为512. 10~ ...
- 浅谈Oracle12c 数据库、用户、CDB与PDB之间的关系
名词介绍: 数据库:数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生 于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以 后,数据管理不再仅仅是存储和管理 ...
- linux bash命令行基本操作
shell shell 我们叫做壳,我们知道操作系统底层是有一个内核kernel的,内核用来实现所有上层服务,所有上层命令,上层应用所需要的一些基本功能,比如说网络连接,网络通信,比如说键盘驱动, ...