最近写网页经常需要将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. 第18月第22天 机器学习first

    1.网易公开课 机器学习   http://open.163.com/special/opencourse/machinelearning.html https://github.com/search ...

  2. 啊金学习javascript系列一之javascript整体印象

    javascript是一门编程语言,这个是第一个观点.是编程语言,那就拥有编程语言的功能.在我理解之中,编程语言是和计算机打交道的语言,就是我们跟计算机说话用的语言,是用来指挥计算机的.人类能够理解语 ...

  3. GHOST分区丢失只剩C盘

    很多人装系统时会经常会使用GHOST来恢复自己的系统,当WINDOWS系统出现意外时,再用GHOST的“From Image to 分区”来对系统进行恢复,这样就可以省去繁琐耗时的重新安装操作系统的工 ...

  4. linux 查看用户上次修改密码的日期【转】

    1.找到以下文件: cat /etc/shadow 第三段字符就是最近一次密码修改的天数,此数字是距离1970年1月1日的天数.   2.用以下命令计算: date -u -d "1970- ...

  5. nodejs 在线学习课堂

    http://ww***/class/5359f6f6ec7452081a7873d8

  6. 【转】通过xml处理sql语句时对小于号与大于号的处理转换

    当我们需要通过xml格式处理sql语句时,经常会用到< ,<=,>,>=等符号,但是很容易引起xml格式的错误,这样会导致后台将xml字符串转换为xml文档时报错,从而导致程序 ...

  7. tomcat中gzip压缩

    在tomcat中压缩文件,修改server.xml文件中的配置 <Connector port="8080" protocol="HTTP/1.1" co ...

  8. linux设备模型：扩展篇

    Linux设备模型组件:总线  一.定义:总线是不同IC器件之间相互通讯的通道;在计算机中,一个总线就是处理器与一个或多个不同外设之间的通讯通道;为了设备模型的目的,所有的设备都通过总线相互连接,甚至 ...

  9. vue系列之项目打包

    vue完成项目后,如何打包成静态文件,并且用Node调试 打包 1.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包 ...

  10. java多线程快速入门（六）

    多线程应用实例(批量发送短信) 1.创建实体类 package com.cppdy; public class UserEntity { private int id; private String ...