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来解决问题. 可 ...
随机推荐
- Vue组件中的Data为什么是函数。
简单点说,组件是要复用的,在很多地方都会调用. 如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...
- Java实现图形界面的三部曲及IDE中的窗口设计
设计和实现图形用户界面的工作主要有以下几点: • (1)创建组件(Component) • 创建组成界面的各种元素,如按钮.文本框等.• (2)指定布局(Layout) • 根据具体需要排列它们的位置 ...
- 清理 /dev/vda1 系统磁盘
df-h检查一台服务器磁盘使用空间,发现磁盘已经使用了100% 思路是: 1.cd /usr 2.du -sh * 看哪个目录占用空间大 3.重复前两步,根据实际情况删除或者移走 4.日志的话可以运行 ...
- 07 部署fastDFS文件数据库
安装fastDFS前必须准备好两个版本匹配的文件: libfastcommon_V1.0.7.tar.gz:基础库文件 FastDFS_V5.05.tar.gz:文件数据库文件 注:这两个文件版本要匹 ...
- c#中的位运算
&与 全为1才是1 |或 全为0才是0 !非 两边相同时为1,不同时为0 ~取反 0变1,1变0,包括符号位 >>右移 溢出舍掉,正数补0,负数补1,移动n位:原数 / 2 ...
- oracle 处理锁表,创建新的数据库实例
select saddr,sid,serial#,paddr,username,status from v$session where username is not null and usernam ...
- IntelliJ IDEA 2017.3尚硅谷-----取消更新
- opencv学习之颜色空间转换cvtColor()
我们生活中大多数看到的彩色图片都是RGB类型,但是在进行图像处理时,需要用到灰度图.二值图.HSV.HSI等颜色制式,opencv提供了cvtColor()函数来实现这些功能.首先看一下cvtColo ...
- SpringBoot:静态资源的访问和配置(转载)
默认静态资源访问Spring Boot的默认静态资源的路径为: spring.resources.static-locations=classpath:/META-INF/resources/,cla ...
- setCascadeOpacityEnabled
setCascadeOpacityEnabled Enable or disable cascade opacity, if cascade enabled, child nodes' opacity ...