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 直接添加一个Fragment到activity,不需要额外setContentView
getSupportFragmentManager().beginTransaction().replace(android.R.id.content,new ArticleListFragment( ...
- Mvc-WebAPI特性路由(自定义路由)Demo
Demo由VS2017编写. 1.先建一个WebApi项目 2.WebApiConfig.cs需要注册特性路由,config.MapHttpAttributeRoutes(); 3.项目默认有2个Co ...
- Ansible:playbook-nagios
一.创建目录结构 cd /etc/ansible/roles/ mkdir nagios/{files,templates,vars,handlers,meta,default,tasks} -pv ...
- centos7使用jenkins启动找不到模块
问题: 在jenkins上启动pycharm项目报:ModuleNotFoundError: No module named 'wanwenyc' 其中‘wanwenyc’为pycharm工程项目路径 ...
- 返回一条最近一次cURL操作明确的文本的错误信息。
参考:https://www.runoob.com/php/func-curl_error.html <?php // 创建一个指向一个不存在的位置的cURL句柄 $ch = curl_init ...
- 计数器IP核
Quartus II提供的LPM_couter IP核的使用 FPGA设计方式: 原理图,Verilog HDL设计方式,IP核输入方式 创建IP核 点击TOOLS—IP catalog-libray ...
- quartus在线调试的方法
quartus在线调试的方法 在Quartus II Version 7.2 Handbook Volume 3: Verification中的Section V. In-System Design ...
- ASP.NET + MVC5 入门完整教程四---MVC 中使用扩展方法
https://blog.csdn.net/qq_21419015/article/details/80433640 1.示例项目准备1)项目创建新建一个项目,命名为LanguageFeatures ...
- CI框架Email类发送邮件提示Unable to send data: . The following SMTP error was encountered: Unable to .......
最近服务器迁移,然后CI框架做的项目发邮件全挂掉了,刚开始是25端口没开,然后开了正好还是有问题, 1.打印请求信息和返回信息 echo $this->email->print_debug ...
- window cmd下常用操作
创建文件夹 mkdir 创建空文件 type nul>文件名 进入目录 cd 进入分区 分区名 引入文件 当前文件: ./文件名 或 直接文件名 上一级目录文件及上一级目录下子文件:../文件名 ...