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 ...
随机推荐
- Lua与C交换
1.C调用Lua函数 (1) 首先要进行Lua的初始化,这个主要是lua_open和luaL_openlibs函数 (2)然后是解析并编译lua的代码,这个主要是luaL_dofile函数 (3) ...
- CENTOS7 YUM安装BOOST1.53（静态版本）
按照之前的博文更新163的源之后,执行: yum install boost-static.i686 yum install boost-devel.i686 yum install boost-do ...
- js关系图库：aworkflow
auto-workflow 用于快速构建各种关系图的库,比如流程图,可视化执行流等 github地址:https://github.com/auto-workflow/AWorkflow 快速开始 n ...
- 引用数据类型（类）和ArrayList
引用数据类型(类) 类的类型为两种: 第一种,Java为我们提供好的类,如Scanner类,Scanner类等,这些已存在的类中包含了很多的方法与属性,可供我们使用. 第二种,我们自己创建的类,按照类 ...
- unittest测试框架详谈及实操(三)
断言 unittest的TestCase类提供了很多实用的方法来校验预期结果和程序返回的实际结果是否一致.当然这些方法要求必须满足某些条件才能继续执行接下的测试.大致有3种这样的方法.各覆盖一个特定类 ...
- iOS设计模式之单例
单例模式的意思就是这个类只有一个实例,这个类就是单例类.在iOS中有不少都是单例NSNull,NSFileManager ,UIApplication,NSUserDefaults ,UIDevice ...
- C++ 动态分配二维和三维数组
目的:熟悉c++动态内存分配 描述:使用c++程序定义动态数组类,使用new和delete操作符实现动态二维数组和三维数组的定义 //main.cpp //主程序类 #include <iost ...
- VMware安装Ubuntu分辨率无法适应屏幕的解决方法
一开始虚拟机安装Ubuntu的时候遇到分辨率无法适应屏幕的时候,百度了一大堆都说使用xrandr命令来修改分辨率,但是还是无法适应1920x1080的屏幕,强迫症表示非常难受! 然后在不知道是 ...
- Windows GDI绘图基础知识
一.Windows可以画直线.椭圆线(椭圆圆周上的曲线)和贝塞尔曲线.////////////7 个画线函式是:(1)画直线LineTo BOOL LineTo(HDC hdc,int nXEn ...
- 设置ArcGIS地图文档的数据源为相对路径
ArcGIS中默认情况下,地图文档的数据源路径为绝对路径.在这种情况下,如果移动/拷贝地图文档及其数据源后,再次打开地图文档时,就看不到具体图层数据了(图层列表中图层前有“!”图标,并且无法查看图层数 ...