最近写网页经常需要将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. Linux之Ubuntu下如何查看已安装的软件/库文件【摘抄】

    本文属于实用性质,且属于摘抄别处,出自:[Ubuntu 下如何查看已安装的软件](http://blog.csdn.net/m1205979825/article/details/40855583) ...

  2. luogu P2627 修剪草坪

    传送门 单调队列优化dp板子 表示不大想写详细做法,自己看代码吧qwq (懒) 注意细节,不然就会跟我一样WA4次 // luogu-judger-enable-o2 #include<bits ...

  3. luogu P2515 [HAOI2010]软件安装

    传送门 看到唯一的依赖关系,容易想到树型dp,即\(f_{i,j}\)表示选点\(i\)及子树内连通的点,代价为\(j\)的最大价值,然后就是选课那道题 但是要注意 1.题目中的依赖关系不一定是树,可 ...

  4. python技巧 计算字符串中字母出现的次数并取出最大

    有一个字符串 “aaddfdfdercfghfyttefsfsfewretr123trefg5624sdfcgvfdgte6435234532”,现在需要取出里面出现次数最多的字符 第一种方法-装饰器 ...

  5. POJ1236 Network of Schools【强连通】

    题意: N(2<N<100)各学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输,问题1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件 ...

  6. 表单之input的样式修改

    修改placeholder字体颜色 html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" ...

  7. History API:ScrollRestoration

    By Paul Lewis(设计和性能倡导者)   翻译:江天 使用history api管理url是非常棒的一件事,可以说这是一个好web app的极为重要的特点.但它有一个缺点,滚动位置虽然被存储 ...

  8. Mybatis进阶学习笔记——输入映射

    1.输入映射 输入映射支持的类型: 1) 基本的类型,int,String,double 等(*)2) JavaBean 类型(*)3) 包装JavaBean 类型(对象里面包含另一个对象) 1.1基 ...

  9. 【Udacity并行计算课程笔记】- Lesson 2 The GPU Hardware and Parallel Communication Patterns

    本小节笔记大纲: 1.Communication patterns gather,scatter,stencil,transpose 2.GPU hardware & Programming ...

  10. Informatic学习总结_day02

    1.sort组件(排序) 2.aggregater组件  聚集组件  sum   如果不排序,去做汇总的话,一个大的session 运行起来会很慢 3.join控件  连接组件 对于异构的数据源,一个 ...