精华内容
下载资源
问答
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...

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


    欢迎大家加入QQ群一起交流讨论, 「吟游」程序人生——YinyouPoet
    展开全文
  • 如何让DIV居中呢?如何DIV盒子水平居中呢?本节DIVCSS5大家实现DIV布局水平居中。 一、div居中实现介绍 - TOP 在布局一张网页时,通常网页主体框架是居中于浏览器的。实现最外层DIV水平居中与浏览器需要一...

    DIV 居中之div水平居中 让DIV布局居中篇

    如何让DIV居中呢?如何让DIV盒子水平居中呢?本节DIVCSS5让大家实现DIV布局水平居中。

    一、div居中实现介绍   -   TOP

    在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。

    假如最外层DIV盒子CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子居中。

    一条件:
    这个时候对“body”设置css内容居中样式(text-align:center)

    CSS代码

    1. body{text-align:center} 

    一设置:

    这个时候对“#divcss5”设置居中必备样式css margin
    即CSS代码:

    1. #divcss5{margin:0 auto} 

    二、DIV居中用法实例   -   TOP

    为了便于观察布局居中效果,我们再对“#divcss5”加一个css边框为黑色,css宽度为300px;高度为100px样式。

    1、最终得到DIV居中的CSS代码:

    1. body{ text-align:center} 
    2. #divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px} 

    2、对应html代码片段:

    1. <div id="divcss5">DIV水平居中案例</div

    3、居中案例截图

    实现div居中实例截图
    DIV水平居中效果图

    4、在线演示:查看案例

    转载于:https://www.cnblogs.com/ylei11/p/10459575.html

    展开全文
  • DIVDIV居中显示

    千次阅读 2017-12-16 10:33:02
    发现前端div中div不是居中显示的,网上说将父级DIV设置为text-align:center 子级设置为margin:0 auto,但是我试了下无效,不知道为什么。后来换了一种方法, 父级Divdisplay: flex; align-items: center; 子级...

    最近项目上的问题大部分都是前端页面的问题,所以我自然就跑去修改前端代码了,
    发现前端div中的div不是居中显示的,网上说将父级DIV设置为text-align:center
    子级设置为margin:0 auto,但是我试了下无效,不知道为什么。

    后来换了一种方法,
    父级Div

    display: flex;
    align-items: center;  

    子级div就居中了

    展开全文
  • 该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • CSS中让DIV居中的代码

    2020-12-13 10:08:26
    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身...经过这么一番设置问题似乎解决了,在FF已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模
  • div居中以及div的元素居中

    万次阅读 2018-10-23 14:45:29
    div居中以及div的元素居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css设置这两个值不能居中的效果。 div水平居中:设置margin的左右边距为自动。 1 div 2 ...

    div居中以及div中的元素居中
    div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。

    1. div水平居中:设置margin的左右边距为自动。

    1 div
    2 {
    3 margin:0 auto;
    4 }
    2. div中的元素居中

    2.1 div中的文字居中:将div的行高设置跟其高度一样的值。

    1 div
    2 {
    3 height:200px;
    4 line-height:200px;
    5 }
    2.2 div中的图片居中,方法一:将div的行高设置跟其高度一样的值,将其中的图片img外套上标签i,设置i和div同时垂直居中

    div
    {
    width: 200px;
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    background-color: Gray;
    }
    div i
    {
    vertical-align: middle;
    }

    2.3 div中的图片居中,方法二:将div转换成tablecell,让后设置vertical-align属性居中。

    div
    {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    background-color: Gray;
    }

    展开全文
  • 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平...
  • 让div在屏幕中居中(水平居中+垂直居中)的几种方法】 水平居中方法: 1.inline,inline-block元素的水平居中,在父级块级元素设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin:0 auto...
  • 主要介绍了Jsp如何图片在div中居中的小技巧,需要的朋友可以参考下
  • div居中

    千次阅读 2015-05-31 15:43:53
    div居中
  • 让div在body水平和垂直居中

    千次阅读 2019-01-29 11:13:17
    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文,我将给大家讲述如何用CSS和jQuery两种方法...
  • div中让文字垂直居中

    千次阅读 2018-08-12 19:59:27
    div中如何文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来。 情景再现 为了方便展示,我把style先直接写在了div里。 &amp;lt;div style=&...
  • 让div中的文字水平垂直居中

    千次阅读 2019-03-15 15:09:04
    总所周知水平居中为:text-align:center 垂直居中为:line-height:100px (此处100px为外边div的宽度)
  • div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px...
  • CSS怎么让DIV居中

    2014-07-10 17:42:26
    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? ...
  • css让div居中

    千次阅读 2019-06-12 12:03:02
    html中div标签默认是占一整行的,如果需要设置指定大小并且还要居中,最简单的方式是设置margin值(这里是水平居中) <!DOCTYPE html> <html lang="zh"> <head> <style> .test{ width:...
  • CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身...经过这么一番设置问题似乎解决了,在FF已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模
  • css让div居中显示

    万次阅读 2018-10-12 18:57:54
    绝对居中 .xx_div { position: absolute; /* left, right, bottom, top要和position一起使用,margin-*不用 */ top: 0; left: 0; right: 0; bottom: 0; } 这样div框就会绝对显示在网页中间   浮动居中 ...
  • 提供了divdiv中居中的多种方式,直接打开文件F12查看样式即可,简单方便。不再只会使用绝对布局
  • 有时候在Div中加上 <div xss=removed></div>里面的Table是不会居中的我们可以在Table加上 margin:auto比如: 复制代码代码如下: <div xss=removed> ”1″ cellpadding=”3″ cellspacing=”0″ xss=removed> <tr>...
  • 在CSS样式里面加上margin:0 auto;就好了。
  • Div上下居中

    2020-10-31 02:28:58
    Div上下居中
  • DIV 垂直居中

    2011-11-14 21:41:36
    DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中
  • 在html如何使div在页面中居中显示

    万次阅读 多人点赞 2019-02-28 13:40:41
    在html如何使div在页面中居中显示 最近无聊又再温习了下html,发现好多东西都忘了。尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样可以实现,因为css还没...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 107,746
精华内容 43,098
关键字:

怎么让div中的div居中