div居中

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

回眸只為那壹抹淺笑 提交于 2020-03-08 13:48:08
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未知高度的垂直居中代码

白昼怎懂夜的黑 提交于 2020-03-08 08:03:49
代码 <! 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中垂直居中

旧街凉风 提交于 2020-02-27 05:12:38
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中垂直居中

那年仲夏 提交于 2020-02-15 08:43:11
方法一: 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居中

不羁的心 提交于 2020-01-27 01:01:03
说到居中的问题,或许大多数童鞋都会想到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的水平居中和垂直居中

元气小坏坏 提交于 2020-01-27 00:58:13
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动态水平垂直居中

依然范特西╮ 提交于 2020-01-24 20:52:48
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水平、垂直居中

烈酒焚心 提交于 2020-01-15 08:45:17
一共有三个方案: 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居中显示

一世执手 提交于 2020-01-10 20:10:39
设置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 图片垂直居中

喜你入骨 提交于 2019-12-28 23:55:31
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;