最近写网页经常需要将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. luogu P4778 Counting swaps

    计数套路题?但是我连套路都不会,,, 拿到这道题我一脸蒙彼,,,感谢@poorpool 大佬的博客的指点 先将第\(i\)位上的数字\(p_i\)向\(i\)连无向边,然后构成了一个有若干环组成的无向 ...

  2. 第16月第8天 NSInvocation存储 函数指针 va_arg lldb

    1.NSInvocation存储 -(void)setInvok:(id)target sel:(SEL)sel key:(id)key { if(!target) return; NSMethodS ...

  3. 洛谷4718【模板】Pollard-Rho算法

    传送门 Description: 给定T个数,分别求出它们的最大质因数 Solution: 其实大概框架是很容易想到的 对于一个数n 找到它的一个因数x 判断这个因数是不是质数 如果是质数就更新答案 ...

  4. 【转】Linux中常见问题（磁盘 定时任务）

    [转]Linux中常见问题(磁盘 定时任务) 第1章 linux无法上网 1)     第一步,先ping域名. ping www.baidu.com 2)再ping一个公网ip , ping 223 ...

  5. mac安装mysql8.0的错误

    在MySQL 8.0中,caching_sha2_password是默认的身份验证插件,而不是mysql_native_password.有关此更改对服务器操作的影响以及服务器与客户端和连接器的兼容性 ...

  6. WM8960音频播放

    第一节 音频播放原理首先需要申明一下,本章的代码来自网络,参考了亚嵌教育李明老师(论坛ID:limingth)的帖子: http://www.arm9home.net/read.php?tid=205 ...

  7. matplotlib画堆叠条形图

    import matplotlib.pyplot as plt%matplotlib inlineplt.style.use('ggplot') plt.style.use("ggplot& ...

  8. SQL日期时间和字符串函数

  9. SpringMVC（2）：Spring MVC入门

    原文出处: 张开涛 2．1.Spring Web MVC是什么 spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思 ...

  10. Slick.js+Animate.css 结合让网页炫动起来

    一个代码示例: html部分 <link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css ...