最近写网页经常需要将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. HTML5的学习（一）HTML5标签

    HTML5是WHATWG与W3C合作,创建的一个新版本的HTML.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成.HTML5相比于之前的HTML的其他版本增加了 ...

  2. MSSQL-SELECT&UPDATE动作要申请的锁

    最近在学习[MySQL事务&锁]这块知识,一不留神和MSSQL乱窜了~.~ 文章最初是想查看MySQL vs MSSQL在下面环境产生的阻塞现象会话1开启事务更新数据尚未提交->会话2读 ...

  3. plist反序列化

    // //  ViewController.m //  03-plist文件的一个反序列化 // //  Created by jerry on 15/9/28. //  Copyright (c) ...

  4. 如何往linux上面上传东西

    在linux中rz 和 sz 命令允许开发板与主机通过串口进行传递文件了,下面我们就来简单的介绍一下rz 和 sz 命令的例子. rz,sz是Linux/Unix同Windows进行ZModem文件传 ...

  5. ubuntu14.04 提示 卷 文件系统根目录 仅剩余xxx的硬盘空间

  6. ReLu、LeakyRelu、PReLu（转载）

    转载链接:http://blog.csdn.net/cham_3/article/details/56049205

  7. SCons: 替代 make 和 makefile 及 javac 的极好用的c、c++、java 构建工具

    http://scons.org/ https://www.ibm.com/developerworks/cn/linux/l-cn-scons/index.html 后附:另外,WAF是一个基于sc ...

  8. GCC选项_-Wl,-soname 及 DT_NEEDED 的解释

    -Wl选项告诉编译器将后面的参数传递给链接器. -soname则指定了动态库的soname(简单共享名,Short for shared object name) soname的关键功能是它提供了兼容 ...

  9. python高级编程读书笔记（一）

    python高级编程读书笔记(一) python 高级编程读书笔记,记录一下基础和高级用法 python2和python3兼容处理 使用sys模块使程序python2和python3兼容 import ...

  10. 信息检索（IR）的评价指标介绍 - 准确率、召回率、F1、mAP、ROC、AUC

    原文地址:http://blog.csdn.net/pkueecser/article/details/8229166 在信息检索.分类体系中,有一系列的指标,搞清楚这些指标对于评价检索和分类性能非常 ...