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来解决问题. 可 ...
随机推荐
- android 如何查看socket、websocket通信数据 抓包
怎么使用可以自行百度
- hzq84621巨佬的语录
摘自诸中培训讲图论时: 1.光图论考不出什么东西,一般作为DP的附庸出现. 2.如果不是骗骗不承认SPFA的外国人,一般能用dij就用dij. 3.那个东西(指bellman-ford)除了判负环没什 ...
- centos7下自动备份mysql数据库
环境:centos7 .mysql5.7 第一步:创建自动备份脚本文件 mkdir backup cd backup touch backup.sh 第二步:在备份脚本文件中写入备份脚本 vim ba ...
- JUC—Callable接口
一.callable接口是什么? 面试题: 获得多线程的方法几种? 正确答案如下: 传统的 是继承thread类和实现runnable接口, java5以后又有实现 callable接口 和 java ...
- day03_2hibernate
HQL.QBC详解.c3p0连接池的整合.事务的隔离级别.乐观锁.悲观锁 一.HQL详解: ①关于HQL的使用语法:[select/update/delete...][from...][类名 as ...
- SharePoint资料
链接:https://pan.baidu.com/s/1QOSShE02LYKXFtoJ58WCQQ 提取码:dnhs 复制这段内容后打开百度网盘手机App,操作更方便哦 SharePoint 200 ...
- python3练习100题——005
继续做题-答案都会经过py3测试原题网址:http://www.runoob.com/python/python-exercise-example5.html 题目:输入三个整数x,y,z,请把这三个 ...
- codeforces 1284E. New Year and Castle Construction(极角排序+扫描枚举)
链接:https://codeforces.com/problemset/problem/1284/E 题意:平面上有n个点,问你存在多少组四个点围成的四边形 严格包围某个点P的情况.不存在三点共线. ...
- 阿里云MySQL安装到centos,并链接。
Last login: Wed Jan 22 11:21:17 on ttys001 wulaguixiaomianyangdeMacBook-Pro:~ xingwen$ ssh root@47.9 ...
- echart如何去掉X 、Y轴的网格线
1.如何去掉X.Y轴的网格线,关键是splitLine{show:false} xAxis:[{ type:'value', splitNumber:2, scale:true, splitLine: ...