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 ...
随机推荐
- 一张图5分钟熟悉MarkDown的基本语法
看到zealer上面有介绍MarkDown的,以前在老罗的发布会也听说过,说锤子便签支持MarkDown,但是不知道有什么用,现在来看看,确实不错. MarkDown的好处是让你可以专注于写字本身,而 ...
- loadrunner12-错误 -26366: 找不到 web_reg_find 的“Text=19728.00”
转:检查点(web_reg_find函数详解) LR检查点 设置检查点的目的不只是为了验证我们的脚本没有错误,而更重要的是一个规范问题,如何使得测试结果更具有说服力,因此建议所有的测试脚本中都添加检查 ...
- [C++] decltype(auto) C++ 11 feature
1 //C++ 11 feature template <class T1, class T2> auto getMultiply(T1 data1, T2 data2) -> de ...
- tp5写日志
- Auto Encoder
对自编码器的理解: 对于给定的原始输入x,让网络自动找到一种编码方式(特征提取,原始数据的另一种表达),使其解码后的输出x'尽可能复现原始输入x. 知乎参考:https://www.zhihu.com ...
- 一张图让你看懂HDMI针脚定义
一张图让你看懂HDMI针脚定义 摘自:http://www.hdmiaoc.com/cjwt-175.html 什么是HDMI线,HDMI插头的每根PIN脚是什么意思? 大部分使用HDMI标准的研发及 ...
- vim在linux下中如何设置显示行数
在.vimrc(或/etc/vimrc)文件中输入如下文本: set tabstop=4 set softtabstop=4 set shiftwidth=4 set noexpandtab ...
- HDU 1111 Secret Code (DFS)
题目链接 题意 : 给你复数X的Xr和Xi,B的Br和Bi,让你求一个数列,使得X = a0 + a1B + a2B2 + ...+ anBn,X=Xr+i*Xi,B=Br+Bi*i : 思路 : 首 ...
- GitHub 出现这样的问题怎么办
一开始以为是被墙,憋个半死. 后来自己好了(大概过了一上午),虚惊一场.
- 【小梅哥SOPC学习笔记】系统时钟的使用
给NIOS II CPU添加一颗澎湃的心——系统时钟的使用 本实验介绍如何在Qsys中添加一个定时器作为NIOS II的心跳定时器,并在NIOS II中软件编程使用该定时器. 将上一个实验watchd ...