div居中 | 易学教程

水平垂直居中div的3中方式

阅读更多关于水平垂直居中div的3中方式

flex方式 <div class="dv"> <div class="dv2"></div> </div> .dv{ width: 400px; height: 400px; background-color: red; display: flex; justify-content: center; align-items: center; } .dv2{ width: 200px; height: 200px; background-color:blue; } position方式 <div class="dv3"> <div class="dv4"> </div> </div> <style> .dv3 { width: 400px; height: 400px; background-color: yellow; position: relative; } .dv4 { width: 200px; height: 200px; position: absolute; background-color: purple; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } </style> position+transform 方式 <div class="dv5"> <div class="dv6"> </div> <

DIV未知高度的垂直居中代码

阅读更多关于 DIV未知高度的垂直居中代码

代码 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > Vertical centering in valid CSS </ title > < style type ="text/css" > body { padding : 0 ; margin : 0 ; font-size : 75% ; line-height : 140% ; font-family : Arial, Helvetica, sans-serif ; } body,html { height : 100% ; } a { color : #333 ; } a:hover { color : green ; } #outer { height : 100% ; overflow : hidden ; position : relative ; width :

小的div在大的div中垂直居中

阅读更多关于小的div在大的div中垂直居中

1. <div style="width:200px;height:200px;border:solid blue;position:relative;"> <div style="width:100px;height:100px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: red;"></div> </div> 2. <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;"> <div style="width:100px;height:100px;display:inline-block;background-color: red;"></div> </div> 子div如果是block元素，在里面加一个margin:auto;，效果也一样 <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;

小的div在大的div中垂直居中

阅读更多关于小的div在大的div中垂直居中

方法一： 1、代码： 1 <div style="width:200px;height:200px;border:solid blue;position:relative;"> 2 <div style="width:100px;height:100px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: red;"></div> 3 </div> 2、效果图：方法二： 1、代码： 1 <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;"> 2 <div style="width:100px;height:100px;display:inline-block;"></div> 3 </div> 2、效果图：方法三： 1、代码： 1 <div style="width:200px;height:200px; border:2px solid #000;display:flex;justify-content:center;align-items:center;"> 2 <div

盒模型中的div居中

阅读更多关于盒模型中的div居中

说到居中的问题，或许大多数童鞋都会想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的确，这些属性在某种程序上可以达到居中的效果。但是否是适用于每一种情况呢？我们先来温习一下这些个属性值的用处。 text-align:center; 行内元素的水平居中显示； margin:0 auto; 固宽盒子在浏览器中的居中显示效果； vertical-align:middle; 行内元素的垂直居中显示； line-height:height; 针对于单行文字垂直居中显示； ==================================== HTML: <div class="A"> <div class="B">测试</div> </div> ---------------------------------- CSS: 第一种方法：（常用） .A{ position: relative; height:500px; width:500px; background-color:#FF0000;} .B{ position: absolute; top:50%; left:50%; height:250px; width:250px; background-color:#FFF

div的水平居中和垂直居中

阅读更多关于 div的水平居中和垂直居中

div是html中的一个标签，一般称之为盒子。有宽度、有高度，是可以存放内容的一个区域。但是如何让div在页面上以水平或者垂直的方式居中呢？ 1.div水平居中　　div水平居中其实很简单，只要使用到margin中的auto就能实现。代码如下： <html> <head> <title>div水平居中</title> <style> .horizontal{ width:800px; height:300px; background: #ff6a00; margin:100px auto; /*100px是div的上下边距，auto表示左右边距自适应（即水平居中）*/ } </style> </head> <body> <div class="horizontal"> 我是水平居中的div </div> </body> </html> 2.div垂直居中　　div垂直居中的方法一般是使用absolute定位（绝对定位）的方式来实现的。代码如下： <html> <head> <title>div水平垂直居中</title> <style> .divbox{ width:500px; height:300px; line-height:300px; text-align:center; background:#ccc; position:absolute; left:50%;

css的div动态水平垂直居中

阅读更多关于 css的div动态水平垂直居中

div动态水平垂直居中，思路如下：（1）先定位。如果相对于距离最近的父元素，用absolute；如果相对于body，用fixed。（2）然后，top和left都设为50%。（3）要居中的div的margin-top和margin-left，都设置为该div高度和宽度的一半。 position:absolute; width:200px; height:100px; left:50%; top:50%; border:1px solid red; margin-left:-100px; margin-top:-50px; 如果只是水平居中，只用一个margin就行了。 margin:0 auto; 来源： https://www.cnblogs.com/lsongyang/p/7493712.html

css实现不定宽高的div水平、垂直居中

阅读更多关于 css实现不定宽高的div水平、垂直居中

一共有三个方案： 1，第一种方案主要使用了 css3中transform 进行元素偏移，效果非常好这方法功能很强大，也比较灵活，不仅仅局限在实现居中显示。兼容方面也一样拿IE来做比较，第二种方法IE8以上都能使用。 IE8及IE8以下都会出现问题。 <body> <div id="box"> <div id="content">div被其中的内容撑起宽高</div> </div> </body> body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; } #content{ position:absolute; background:pink; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); } 2，第二种利用 flex 进行布局很简单几句代码就实现了。可惜IE浏览器并不怎么支持display:flex; <body> <div id="box"> <div id="content"

设置div中的div居中显示

阅读更多关于设置div中的div居中显示

设置div中的div居中显示方法一、 <div class='big'> <div class='small'>box1</div> </div> style样式： .big{ height:200px; width:200px; border:black solid 1px; position:absolute; left:150px; } .small{ height:100px; width:100px; background-color:green; position:relative; left:100px; top:100px; margin-top:-50px; margin-left:-50px; border:black solid 1px; } 方法二、 div class='big2'> <div class='small2'>box3</div> </div> .big2{ height:200px; width:200px; border:black solid 1px; text-align:center; } .small2{ height:100px; width:100px; background-color:green; margin:50px auto; //外面的div高度的一半 border:black solid 1px; } 来源：

div 图片垂直居中

阅读更多关于 div 图片垂直居中

div水平居中很容易，设置css样式 text-align: center; 就可以了。垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。第一种方法：通过一个空白图片可以达到垂直居中的效果。 <html> <style> #image{ width:500px; height:500px; background:#fff000; text-align: center; overflow: hidden; } #image img { 　　　　vertical-align: middle; 　　 } #block { width: 0px; height: 100%; } </style> <body> <div id="image"> <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/> <img src="" id="block"/> </div> </body> </html> 个人觉得 vertical-align: middle 是相对于左边的高度垂直居中的，我给左边一个填满div的图片，就可以实现垂直居中了。第二种方法：往div里面加表格。 <html> <style> #a { background: #fff000;

订阅 div居中