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 ...
随机推荐
- js setTimeout 和 setInterval 区别
setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的 ...
- [C++] * Basic and Class
C++ 目 录 1 开始学习C++ 4 1.1 C++的头文件 4 1.2 命名空间 4 1.3 更严格的类型转化 4 1.4 new和delete 4 1.5 内联函数 4 1.6 引用 5 1. ...
- sed高级用法：模式空间(pattern space)和保持空间(hold space)
摘自:https://blog.csdn.net/ITsenlin/article/details/21129405 sed高级用法:模式空间(pattern space)和保持空间(hold spa ...
- Oracle VirtualBox 问题汇总
1.打开虚拟机时报硬盘UUID 已经存在:错误信息: Cannot register the hard disk 'F:\VirtualBox VMs\cl-11r2-rac2\cl-11r2-rac ...
- Smarty配置与实例化
在smarty文件夹下建立一个test文件夹,test下建立如下: 编辑test.php如下: <?php require('../smarty/Smarty.class.php'); $sma ...
- mybatis之generator生成代码
首先在pom文件中引入以下代码 <plugin> <groupId>org.mybatis.generator</groupId> <artifactId&g ...
- NBA常识 位置的划分 足球：越位等于抢跑
篮球:1号位——组织后卫(控球,组织)2号位——得分后卫(中远投篮,突破)3号位-----小前锋(突破,中远投篮)4号位——大前锋(二中锋,篮板,背身单打,禁区防守)5号位——中锋(篮板.背身单打,禁 ...
- HDU 4714 Tree2cycle (树形DP)
题意:给定一棵树,断开一条边或者接上一条边都要花费 1,问你花费最少把这棵树就成一个环. 析:树形DP,想一想,要想把一棵树变成一个环,那么就要把一些枝枝叶叶都换掉,对于一个分叉是大于等于2的我们一定 ...
- g++中宏NULL究竟是什么？
NULL是个指针,还是个整数?0?或(void*)0?答案是和g++版本有关.g++ 4.6支持C++11,引入了nullptr,也许会发生变化. 可以写段简单代码求证一下: #include < ...
- React Native开发环境的搭建
我只能说搭建开发环境还是不能相信网上纷乱的博客,还是中文网靠谱. http://reactnative.cn/docs/0.47/getting-started.html 纯粹只是为了记录一下.