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 ...
随机推荐
- sqluldr2 学习心得
前言 最近正在做一个项目,需要导出数据库中的表,单数数据库中有很多带有虚拟列的表,而且表中的数据非常的庞大,有些表中的数据上亿条,项目经理让我研究如何快速导出这些数据. 下面是我研究的一些经历: (1 ...
- [转] SQL日期函数dayadd/datediff/datepart
函数一: CREATE OR REPLACE FUNCTION dayadd(p_Component varchar2, p_Number number, p_Date date) RETURN DA ...
- 杂谈c.cpp
Endl确保程序运行前刷新输出(将其立即显示在屏幕上),而’\n’却不能保证 在c++中,是以分号分割的,所以可以把几条代码放在一行,也可以把一条代码放在几行 编译器负责分配和标记内存的细节 C++可 ...
- 团队第二次 # scrum meeting
github 本此会议项目由PM召开,召开时间为4-3日晚上9点 召开时长15分钟 任务表格 袁勤 学习SpringBoot https://github.com/buaa-2016/phyweb/i ...
- Redis梳理
- [UGUI]圆形Image
参考链接: http://www.cnblogs.com/leoin2012/p/6425089.html 前面说过Mask组件会影响性能:https://www.cnblogs.com/lyh916 ...
- win10 64位，家庭版，C++，ini配置说明
#include<windows.h> #include<iostream> #include <atlstr.h> using namespace std; ...
- 1732157 - Collecting diagnosis information for SAP HANA [VIDEO]
Symptom SAP Support asked you to provide a collection of the relevant diagnosis files (also known as ...
- shell：实现linux服务器资源监控并发送告警邮件
1.安装方式 wget http://10.8.225.126/wsmonitor/install.sh;sh install.sh test@test.com 2.install.sh #!/bin ...
- Sphinx 与全文索引
全文索引创建过程 第一步:将源文档传给分词组件(Tokenizer) 分词组件做了以下事情: 将文档分成一个一个的单词 去除标点符号 去除停词:英文(the / a / this / that ... ...