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来解决问题. 可 ...
随机推荐
- matlab 霍夫变换—检测圆
function [hough_space,hough_circle,para] = hough_Circle(BW,step_r,step_angle,r_min,r_max,p) % %%%%%% ...
- PHP 把秒数转为时分秒格式
PHP函数 1.gmdate $seconds = 174940;$hours = intval($seconds/); $time1 = $hours."小时".gmdate(' ...
- MySQL | 查看log日志
1. 进入mysql mysql -u用户名 -p密码 2. 开启日志 et global general_log=on: 3. 查看mysql日志文件的路径 show variables like ...
- 在CentOS上通过Docker方式安装Redis
在CentOS上通过Docker方式安装Redis 首先保证已经安装docker. 拖拽redis镜像 docker pull redis 启动redis docker run -p 6379:637 ...
- PP: Time series clustering via community detection in Networks
Improvement can be done in fulture:1. the algorithm of constructing network from distance matrix. 2. ...
- Linux system 初步
快捷键: open a new terminal: ctrl+alt+T; close current terminal: ctrl+shift+W; switch windows: alt+tab ...
- C变量常量
变量是指其值可以变化的量.计算机中,指令代码.数据都存储于内存中.变量也需要存储在内存中.在计算机中,每个变量都被分配了一块内存空间,在这些空间里存储的就是变量的值.变量之所以可以变化,就是这个存储空 ...
- 【STM32H7教程】第60章 STM32H7的DAC应用之定时器触发实现DMA方式双通道波形
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第60章 STM32H7的DAC应用之定时器触发实 ...
- 使用Unity3d和C#的一些属性来设置特殊行为
使用 Unity 的C#语言 ,利用属性(Attribute)来类定义和变量定义或区分其他的变量,您可以设置一种特殊行为 例如,您添加[SerializeField]属性变量,私有变量标识序列化. [ ...
- [HTML] websocket的模拟日志监控界面
模拟命令行的界面效果,使用swoole作为websocket的服务,重新做了下html的界面效果 <html> <head> <title>SwLog Montio ...