精华内容
下载资源
问答
  • 最近写网页经常需要将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水平居中 DIV布局居中篇 如何DIV居中呢?...实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。 假如最外层DIV盒子的CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现...

    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

    展开全文
  • 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平...
  • 如何让一个div垂直水平居中
    .demo{
    width:100px;
    height: 60px;
    position: fixed;
    left:50%;
    top:50%;
    margin-top:-30px;
    margin-left: -50px;
    }
    margin-top的值是高度的一半
    margin-left的值是宽度的一半
    展开全文
  • 让div水平居中的css方法

    万次阅读 多人点赞 2018-01-02 19:42:23
    让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的) 1、给要设置水平居中的div设置display:block ,margin:0 auto,width , height4属性,可以块级元素水平居中...

    一:让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的)

    1、给要设置水平居中的div设置display:block  ,margin:0 auto,width   ,  height4个属性,可以让块级元素水平居中(默认情况下,div的position:static)

    <!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    		    width:200px;
    		    height:200px;
    		    background-color:red;
    		    display: block;
    		    margin:0 auto;
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>

    显示的效果:



    2、给要水平居中的div设置属性:width    height      position       left      margin-left     

        其中left:50%            position:的值除了static之外的都可以           marin-left:的值为负数,数值大小为width的一半

    <!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			position:relative;
    			left:50%;
    			width:400px;
    			height:400px;
    			margin-left:-200px;
    		        background-color:red;
    		        display: block;
    		    
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>


    二、让div竖直居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的)

    1、给要竖直居中的div设置属性:width    height      position       top     margin-top

     top:50%          margin-top:为负值,值大小为height的一半                 position为absolute或者fixed   

    <!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			    position: absolute;
    			    top: 50%;
    			    width: 400px;
    			    height: 500px;
    			    margin-top: -250px;
    			    background-color: red;
    			    display: block; 
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>


    三、让div同时水平竖直居中的方法

    1、同时水平竖直居中的div设置属性:width    height      position       top     margin-top     left      margin-left

         top:50%   left:50%     position:absolute/fixed           margin-top:-height/2                 margin-left:-width/2

    <!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			    position: absolute;
    			    top: 50%;
    			    left: 50%;
    			    width: 400px;
    			    height: 500px;
    			    margin-top: -250px;
    			    margin-left: -200px;
    			    background-color: red;
    			    display: block; 
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>


    2、给要水平居中的div设置属性:width    height      position       left      margin-left     
    展开全文
  • 总结:让一个div垂直水平居中

    千次阅读 2017-05-31 20:47:04
    工作中遇到块级元素垂直居中的问题。定宽高的div垂直居中很简单,不定宽高的div垂直水平居中的也总结了几种方法。
  • div水平居中

    2017-08-16 14:48:28
    让div水平居中,只需要2步即可 1、先将div的左边距定位至屏幕中间; 2、再将div向左偏移div本身宽度的一半。 将DIV定位至屏幕中间: left: 50% 再向左偏移本身宽度一半:margin-left: -宽度px,...
  • 如何水平居中一个div? 1.不需要知道宽高 css: #wrap{ width: 200px; height: 200px; background: orange; position: absolute/fixed; top:0;bottom:0;left: 0;right: 0;margin:auto; } html: <div id="wrap"&...
  • 水平垂直居中有好多种实现方式,主要就分为两类:不定宽高和定宽高,以在body下插入一个div为例: 定宽高 使用定位+marginelement.style { position: absolute; left: 50%; top: 50%; margin-left: -250px; ...
  • 开始,我看到这问题的时候,心里想这么简单,不就是margin:0 auto吗,再仔细看题目的时候,我去,不定宽高,什么鬼,于是,只能自己动手,亲手实验了。1、利用弹性布局,这是我认为最简单的且容易理解的方法...
  • div水平居中与垂直居中

    千次阅读 2016-02-16 17:42:03
    CSS 如何使DIV水平居中今天用CSS碰到很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center然后嵌套DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索和亲自...
  • 3个div水平居中

    千次阅读 2016-12-16 11:23:51
    margin-left:10px;"> ...div要横向排列就要用float,居中要用margin-left:auto;margin-right:auto,但是有float,这...就会出问题,所以就要在外围定义一个容器,在外围设置margin-left:auto;margin-right:auto居中
  • 一个div在另一个div水平垂直居中

    千次阅读 2019-02-19 17:24:43
    div居中
  • 基础的css样式居中
  • 让div在屏幕中居中(水平居中+垂直居中)的几种方法】 水平居中方法: 1.inline,inline-block元素的水平居中,在父级块级元素中设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin:0 auto...
  • 未知宽高div水平垂直居中3种方法,div水平居中3种
  • div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 兼容性:,IE7及之前版本不支持  div{ width: 200px; height: 200px; background: green; position:absolute; lef...
  • div 水平居中

    2008-05-12 20:10:00
    $ele_width 为元素div宽度,这样就能使div水平居中了。
  • div居中代码 DIV水平居中显示CSS代码

    千次阅读 2015-04-27 09:19:31
    需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div... auto,这样即可对应div水平居中。 实例讲解div居中代码应用,为了观察div居中
  • 实现H5中的文字水平竖直居中 div水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
  • 使div水平居中的方式

    2017-06-17 22:50:25
    div居中这种情况,有时候真的我很伤头脑,也是说明本人对css的使用存在漏洞,当然,像css这么伟大的语言,...问题描述:div里的div水平居中,居中的div宽度随内容而定 首先建立一个三个div 乖巧
  • div栅格是左对齐的,现在我想让一个col-md-11的div水平居中,请问应该怎么办? PS:如果是偶数的话可以用左右各放一个空div的方法实现 如 1 10 1 但是奇数不行啊 。。。
  • 在工作中 经常会碰到让一个div框针对某个模块水平垂直居中 针对这种情况 有多种方法 现在一一实现一下 一. div绝对定位水平垂直居中 margin 负间距 代码: .box { width: 200px; height: 200px; background: ...
  • 一个div水平垂直居中的6种方法

    万次阅读 2018-05-22 23:00:49
    方案: ...div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; background: green; position:absolute; left...
  • 垂直居中 本案例使用的是动画中的transform属性做的: 效果如下: 可以看到:小圆在大圆里面垂直居中 css部分 .box { position: relative; width: 400px; height: 400px; margin: 100px auto; border-...
  • DIV水平居中和垂直居中
  • DIV水平居中显示

    2014-01-21 23:26:17
    DIV水平居中显示 示例: DIV+CSS /*设置水平居中*/ #main{ margin:0 auto; /*上下距离为0px,左右距离自动*/ width:960px; background:#ccc; } #other{ margin:...
  • css中一个div在另一个div中垂直水平居中的若干种方法 css中将元素居中的方法大致有定位居中、弹性盒居中、行内块结合vertical-align以及text-align等方法。 定位居中 定位居中,顾名思义需要用到 “position” ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,182
精华内容 20,872
关键字:

如何让一个div水平居中