最近写网页经常需要将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;

}

效果如图： 

  • 方法二： 
    仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。
 .main{

    text-align: center;

    background-color: #fff;

    border-radius: 20px;

    width: 300px;

    height: 350px;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

}
  • 方法三： 
    对于水平居中，可以使用最简单的<center>标签，不过已经过时了，用法如下：
<p><center>123</center></p>

这个<center>标签就是相对于<p>标签里的文字，可以使其居中。

由于center标签已经过时了，所以正规一点的话还是不建议使用的，可以使用如下的方式代替：

<p style="text-align:center;">123</p>

HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结的更多相关文章

  1. css div相对屏幕永远居中

    不管屏幕如何滑动,该div始终保持在屏幕正中央(支持IE7(包括IE7)以上版本) <div class="loginBox"></div> .loginB ...

  2. 让DIV在屏幕上下左右居中

    转自:http://blog.sina.com.cn/s/blog_65d41dff0100v0iz.html 其实解决的思路是这样的:首们需要position:absolute;绝对定位.而层的定位 ...

  3. Div在BOdy中居中

    <h1 style="position: absolute; width: 500px; height:200px; left:%; top:%; margin-left:-250px ...

  4. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  5. div中元素水平居中的方法

    使用align属性 <div class="main" align="center">        <h1>MAIN</h1&g ...

  6. 关于js获取元素在屏幕中的位置的方法

    针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...

  7. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  8. CSS元素（文本、图片）水平垂直居中方法

    1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relati ...

  9. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

随机推荐

  1. Java SE关键字-static

    一. static代表着什么 在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中static表示“全局”或者“静态”的意思,用来修饰成员变量和成员 ...

  2. 【转贴】Linux下MySQL 5.5的修改字符集编码为UTF8（彻底解决中文乱码问题）

    原文地址; http://www.ha97.com/5359.html PS:昨天一同事遇到mysql 5.5中文乱码问题,找我解决.解决了,有个细节问题网上没人说,我就总结一下. 一.登录MySQL ...

  3. Ngnix + Tomcat负载均衡架构

    一.nginx Nginx (发音同 engine x)是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.  其特点是占有内 ...

  4. 论文笔记系列-Efficient Neural Architecture Search via Parameter Sharing

    Summary 本文提出超越神经架构搜索(NAS)的高效神经架构搜索(ENAS),这是一种经济的自动化模型设计方法,通过强制所有子模型共享权重从而提升了NAS的效率,克服了NAS算力成本巨大且耗时的缺 ...

  5. Android五种数据存储方式

    android 五种数据存储 :SharePreferences.SQLite.Contert Provider.File.网络存储 Android系统提供了四种存储数据方式.分别为:SharePre ...

  6. 基于Python的机器学习实战：AadBoost

    目录: 1. Boosting方法的简介 2. AdaBoost算法 3.基于单层决策树构建弱分类器 4.完整的AdaBoost的算法实现 5.总结 1. Boosting方法的简介 返回目录 Boo ...

  7. SpringBoot整合Druid（阿里巴巴）数据源

    (1).添加相关依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  8. startup_MK64F12.s文件解析

    1.前言 本文主要对freescale芯片 MK64F12的启动汇编文件进行注释解析. 2.文件注释 /* ---------------------------------------------- ...

  9. ARMV8 datasheet学习笔记5：异常模型

    1.前言 2.异常类型描述 见 ARMV8 datasheet学习笔记4:AArch64系统级体系结构之编程模型(1)-EL/ET/ST 一文 3. 异常处理路由对比 AArch32.AArch64架 ...

  10. V4L2应用程序框架【转】

    转自:https://www.cnblogs.com/hzhida/archive/2012/05/29/2524397.html V4L2是V4L的升级版本,linux下视频设备程序提供了一套接口规 ...