方法一代码

<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居中在屏幕中(水平居中 + 垂直居中)的更多相关文章

  1. css div居中

    div中没有text-align和vehicle-align这两个属性,所在在css中设置这两个值没有作用 div 水平居中 设置左右边距有auto div{ margin: 0 auto; } 垂直 ...

  2. 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中

    一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:center ...

  3. CSS——div居中,window.open(0

    margin:0 auto 表示什么意思?? margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0 auto,表示上下边界为0,左右则根据宽度自适 ...

  4. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  5. 结构-行为-样式-Css Div 居中的一个最佳实践

    最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class=" ...

  6. CSS DIV 居中

    左右居中 margin-left: auto; margin-right: auto; 上下居中

  7. HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...

  8. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  9. CSS中怎么让DIV居中(转载)

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

随机推荐

  1. flask操作

    models.py class CompanyGoodsModel(Base): id=Column(Integer, primary_key=True) company_id = Column(In ...

  2. FormData控制台打印为空及使用方法

    之前使用formData都是在network中查看参数,最近在做一个项目,接口还没有,用的假数据做的交互,突发奇想的console.log了 一下,结果是空的. 一开始以为append失效了,经过查证 ...

  3. altair package and altair_viewer

    pip install altair pip install altair_viewer Altair is a declarative statistical visualization libra ...

  4. linux 中对 mysql 数据表的基本命令

    显示数据表的结构 describe 表名; 建表 use 库名: create table 表名(字段设定列表): 将表中记录清空 delete from 表名; 删表 drop table 表名:

  5. SpringBoot中的bean加载顺序

    https://www.dazhuanlan.com/2019/10/22/5daebc5d16429/ 最近在做传统Spring项目到SpringBoot项目迁移过程中,遇到了一些bean加载顺序的 ...

  6. windows下划分逻辑分区

    运行命令窗口后,我们输入命令"diskpart"回车! 然后我们在DISKPART>后面输入select disk 0 选择我们的硬盘,然后回车!当然如果你电脑上有好几块硬盘 ...

  7. Jquery实现点击当前radio button设置选中属性,其它设置非选中属性

    一.HTML代码: <div class="ques-tc-r" id="question_type"> <ul class="cl ...

  8. IntelliJ IDEA 2017.3尚硅谷-----创建的静态 Java Web

  9. 浅谈ABB机器人(工具坐标,工件坐标,有效载荷)

    工具坐标(tool): 使tcl坐标偏移到工具上,例如焊接工作,使机器人工作点切入焊枪点上 mass:工具的重量 xyz:偏移距离的大小 验证:通过手动模式,切换至自定义工具,重定向 工件坐标(wob ...

  10. Oracle使用记录

    1.连接数据库的方式 sqlplus system/system@127.0.0.1:1521/orcl #远程用户名密码连接 sqlplus dbsnmp/oracle; #本地用户名密码连接 sq ...