最近写网页经常需要将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水平、垂直居中的更多相关文章

  1. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  2. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  3. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  4. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  5. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  6. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

  7. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  8. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  9. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  10. 如何将一个div水平垂直居中？4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

随机推荐

  1. wmv 播放器

    部分代码如下 QAction *openFile = new QAction(QIcon(QString(":/Res/open.png")), tr("打开文件&quo ...

  2. SVN远程管理

    1.使用远程桌面连接工具,分别填写连接地址和用户名进行连接 2.紧接着进行安全登录. 3.打开VisualSVN Server Manager工具进行显示已经拥有的项目和分配好的群组管理. 这样子就可 ...

  3. Asp.net：上传文件超过了最大请求长度

    错误消息:超过了最大请求长度    错误原因:asp.net默认最大上传文件大小为4M,运行超时时间为90S.   解决方案 1. 修改web.config文件可以改变这个默认值            ...

  4. ios-微信支付登录分享-notification通知

    // //  AppDelegate.m //  NewAppBase // //  Created by ENERGY on 2018/5/17. //  Copyright © 2018年 ENE ...

  5. set_false_path的用法

    set_false_path的用法 非功能性路径,因为两个多路选择器被相同的选择信号驱动? 上电复位信号 set_false两个异步时钟域的路径 在两个时钟域之间,设置set_false_path,应 ...

  6. 简析Colorspace

    最近Colorspace成为了一个很高频的问题,很多Compositor为这个概念感到纠结,其实这是很正常的,因为Colorspace发展了很多年,也有很多种标准,最后还要落地到合成软件中,中间自然就 ...

  7. EXCEL自动撤销合并单元格并填充相应内容(转帖)

    若EXCEL工作表有很多合并的单元格,要将所有合并的单元格撤销,并填充撤销合并前显示的内容,这是一项很繁琐且容易出错的工作.但可通过宏程序可轻松准确地搞定,方法如下: 一.实现该功能的Excel宏程序 ...

  8. 网络之OSI七层协议模型、TCP/IP四层模型

    13.OSI七层模型各层分别有哪些协议及它们的功能 在互联网中实际使用的是TCP/IP参考模型.实际存在的协议主要包括在:物理层.数据链路层.网络层.传输层和应用层.各协议也分别对应这5个层次而已. ...

  9. ubuntu下的Nessus插件更新

    00x1: 记录下nessus插件离线更新,免得每次度娘我Nessus是放在虚拟机里面. 00x2: nessus 插件更新地址: https://plugins.nessus.org/v2/offl ...

  10. PO & SO Integration By IDOC in CNABB

    PO & SO Integration By IDOC in CNABB 话说博主来ABB一个多月时间了,虽然对ABB系统内的流程和配置不是很了解,但对ABB系统内使用的PO和SO通过idoc ...