hmtl div水平、垂直居中
最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。
水平居中直接加上<center>标签即可，或者设置margin:auto;当然也可以用下面的方法
下面说两种在屏幕正中（水平居中+垂直居中）的方法
放上示范的html代码：
<body>
<div class="main">
<h1>MAIN</h1>
</div>
</body>
方法一：
div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。
.main{
text-align: center; /*让div内部文字居中*/
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
---------------------
作者：qq_32623363
来源：CSDN
原文：https://blog.csdn.net/qq_32623363/article/details/77101971
版权声明：本文为博主原创文章，转载请附上博文链接！
hmtl div水平、垂直居中的更多相关文章
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
- scss : div水平垂直居中
scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 【html】【10】div布局[div水平垂直居中]
必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
随机推荐
- 使用MSF生成shellcode
使用MSF生成shellcode payload和shellcode的区别 Payload是是包含在你用于一次漏洞利用(exploit)中的ShellCode中的主要功能代码.因为Payload是包含 ...
- uml类图符号
符号及实例参照:http://www.blogjava.net/cnfree/archive/2012/10/30/390457.html https://blog.csdn.net/l_nan/ar ...
- 变量、&连接、函数与过程、按下某键
1.变量的声明 常量 信息 为 文本型 = "你好,世界!" '这是常量 变量 结果 为 整数型 '这是程序集变量,在程序集的开头定义即可 变量 测试 为 整数型 = '可以直接给 ...
- Azure CosmosDB (1) 概述
<Windows Azure Platform 系列文章目录> Azure CosmosDB是一个全球分布式数据库服务(Global Distributed Database),提供低延迟 ...
- 在IntelliJ IDEA中使用VIM
IdeaVim(下载)插件可以让你在IntelliJ IDEA中键盘敲的飞起. 安装 打开IDEA的设置,在Plugins里,你可以选择在线搜索Vim安装,当然如果不行,就可以选择单独下载后安装,以下 ...
- element-ui的不稳定性
伤脑筋的版本升级 element-ui升级到2.0版本了! element-ui作为比较成熟的广为人知的前端框架,原本满怀热情的去学习,也基于element-ui搭建出了一套系统,可是它居然升级了! ...
- C++Primer第五版——习题答案详解（六）
习题答案目录:https://www.cnblogs.com/Mered1th/p/10485695.html 第7章 类 练习7.1 class Sales_data { public: std:: ...
- ECMAScript 6 学习总结
1.什么是ES6? 简单的说 ES6 的第一个版本,在2015年6月发布了,正式名称就是<ECMAScript 2015标准>(简称 ES2015)在2016年6月,小幅修订的<EC ...
- Oracle 学习笔记（五）
--表空间,auto: 自动管理, manual: 手动管理 create tablespace tsp1 datafile 'D:\ORACLE\ORADATA\O10\tsp1.dbf' ...
- File mapping
文件映射的三个功能: 1.File mapping allows the process to use both random input and output (I/O) and sequentia ...