CSS - div居中在屏幕中(水平居中 + 垂直居中)
方法一代码
<div>
<h1>404 Not Found.</h1>
</div>
<style>
div {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
在新Tab打开

方法二代码
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
CSS - div居中在屏幕中(水平居中 + 垂直居中)的更多相关文章
- css div居中
div中没有text-align和vehicle-align这两个属性,所在在css中设置这两个值没有作用 div 水平居中 设置左右边距有auto div{ margin: 0 auto; } 垂直 ...
- 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
- CSS——div居中,window.open(0
margin:0 auto 表示什么意思?? margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0 auto,表示上下边界为0,左右则根据宽度自适 ...
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- 结构-行为-样式-Css Div 居中的一个最佳实践
最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class=" ...
- CSS DIV 居中
左右居中 margin-left: auto; margin-right: auto; 上下居中
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- 【转】CSS中怎么让DIV居中
来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...
- CSS中怎么让DIV居中(转载)
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
随机推荐
- 回环屏障CyclicBarrier
上一篇说的CountDownLatch是一个计数器,类似线程的join方法,但是有一个缺陷,就是当计数器的值到达0之后,再调用CountDownLatch的await和countDown方法就会立刻返 ...
- python:复制文件及文件夹
#!/usr/bin/python# -*- coding:utf-8 -*- import shutil #shutil.copy(文件1,文件2)#将源内容复制到目标文件中.d.txt不存在则创建 ...
- K8s控制器
K8s控制器 POD分类 #自主式pod:退出后,不会被创建 #控制器管理的pod:在控制器的生命周期内,始终位置pod的副本数 控制器类型 ReplicationController和Replica ...
- Codeforces Round #601 (Div. 2) D Feeding Chicken
//为了连贯,采取一条路形式,从第一行开始 也就是s型 #include <bits/stdc++.h> using namespace std; ; char str[MAXN][MAX ...
- 《深入理解Java虚拟机》读书笔记十
第十一章 晚期(运行期)优化 1.HotSpot虚拟机内的即时编译 解释器与编译器: 许多Java虚拟机的执行引擎在执行Java代码的时候都有解释执行(通过解释器执行)和编译执行(通过即时编译器产生 ...
- Jquery change方法
jQuery 事件 - change() 方法 当输入域发生变化时改变其颜色: $(".field").change(function(){ $(this).css("b ...
- 一看就会一做就废系列:说说 RECOVER DATABASE(下)
这里是:一看就会,一做就废系列 数据库演示版本为 19.3 (12.2.0.3) 该系列涉及恢复过程中使用的 个语句: 1. recover database 2. recover database ...
- DFT测试-OCC电路介绍
https://www.jianshu.com/p/f7a2bcaefb2e SCAN技术,也就是ATPG技术-- 测试std-logic, 主要实现工具是: 产生ATPG使用Mentor的 Test ...
- java Map 迭代key,value 最简洁的方法
import java.util.HashMap; import java.util.Map; public class EntrySets { public static void main(Str ...
- js面向对象的程序设计 --- 中篇(创建对象) 之 原型模式
·原型模式 我们创建的每一个函数都由一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有 实例共享的属性和方法. 如果按照字面意思来理解,那 ...