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 ...
随机推荐
- [Training Video - 4] [Groovy] Object equality and variable equality check
def x=2 def y=3 if(x == y){ log.info "equal" }else{ log.info "not equal" // prin ...
- 向对象（OO）程序设计
http://www.uml.org.cn/mxdx/201208232.asp 前言 本文主要介绍面向对象(OO)程序设计,以维基百科的解释: 面向对象程序设计(英语:Object-oriented ...
- source insight 保存时删除多余空格，去除多余空格 space tab键
source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...
- diskpart setid value list
ntfs : 07 / 17 显示/隐藏 fat32: 0C / 1C 显示/隐藏 0 空 24 NEC DOS 81 Minix / 旧 Linu bf Solaris 1 FAT12 27 隐藏的 ...
- mongodb 查询条件
这节来说说mongodb条件操作符,"$lt", "$lte", "$gt", "$gte", "$ne&qu ...
- mysql基础操作记录
安装mysql Mac使用homebrew安装mysql,命令行执行以下命令:brew install mysql 启动mysql服务 安装完成后执行start 命令. ➜ ~ mysql.serve ...
- overflow 在ie7下失效
问题原因: 当父元素的后代元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决方法: 在父元素中使用position:relative;即 ...
- C#和C++语言使用方面的区别
本人觉得C#是世界上最优美的语言,也可以说是一门傻瓜语言,入门成本低,上手快得到许多人的青睐,但是C#并没有在行业内得到大家的首肯,反倒是C/C++人才比较紧俏:本人在学习过程中将C#和C++语言使用 ...
- 20169202 2016-2017-2《TCP/IP协议攻击》实验总结--十一周
APR缓存中毒(ARP cache poisoning) 实验原理 ARP缓存是ARP协议的重要组成部分.ARP协议运行的目标就是建立MAC地址和IP地址的映射,然后把这一映射关系保存在ARP缓存中, ...
- Alpha冲刺（五）
Information: 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Details: 组员1 柯奇豪 过去两天完成了哪些任务 基于ssm框架的前后端交互测试,结合微信小 ...