最近写网页经常需要将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. django jquery ajax 知识点

    示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id='d'>1</div> <div> <div id='i1' nam ...

  2. SQLServer调WebService & 错误解决：请求格式无法识别

    (sqlServer 2008 + VS2010) 首先,对服务器进行配置. sp_configure ; GO RECONFIGURE; GO sp_configure ; GO RECONFIGU ...

  3. jquery中使元素显示和隐藏方法之间的区别

    在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...

  4. 【java多线程】队列系统之DelayQueue源码

    一.延迟队列 延迟队列,底层依赖了优先级队列PriorityBlockingQueue 二.延迟队列案例 (1)延迟队列的任务 public class DelayTask implements De ...

  5. Java 中int、String的类型转换

    int -> String int i=12345;String s="";第一种方法:s=i+"";第二种方法:s=String.valueOf(i); ...

  6. 打印 laravel 模型查询产品的 SQL

    1.在路由閉包打印sql 打印一段代码生产的 sql 语句,使用路由闭包做个实验 Route::get('/get-sql', function() { DB::enableQueryLog(); $ ...

  7. centos查看系统版本信息

    1.查看版本文件名称 ll /etc/*centos* 2.显示系统版本号 cat /etc/centos-release

  8. nginx 代理flask应用的uwsgi配置

    socket代理配置: 关于uwsgi的用法,请自行百度,这里只针对socket文件和端口的不同,进行单一的记录. 这种方式启动的flask应用,由于是通过socket与nginx通信的,所以必须制定 ...

  9. 源码编译、安装net-snmp的方法和遇到的问题

    本文参考地址:http://blog.163.com/qiushuhui1989@126/blog/static/270110892014119113421364/ 1. 源码下载 # wget ht ...

  10. [UE4]Invalidation Box

    Invalidation Box:使条目无效的容器.使容器内的条目不再更新,如果确定某一个UI不需要更新的话,就可以把这个UI放到Invalidation Box中. 一.Invalidation B ...