【固定宽高的DIV绝对居中示例】的更多相关文章

固定宽高的DIV绝对居中示例

看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数,绝对值为自身宽高的一半 当然,position也需要指定为absolute,或者relative. 如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性. 如果有边框,那么,margin元素需要做一点微调. 代码如下: <!DOCTYPE html> <html>…

div 固定宽高 水平垂直居中方法

div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单位是px时): 只需要用绝对定位到屏幕中间,然后利用margin-left和margin-top取值就可以实现. <style type="text/css"> .a { border: 1px solid #00caca; width: 900px; height: 500p…

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

一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE8以上都能使用.  IE8及IE8以下都会出现问题. <body> <div id="box"> <div id="content">div被其中的内容撑起宽高</div> </div> </body&g…

实现可调整宽高的DIV（左右拖动和上下拖动）

前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖动白色竖条调整左边区域和红色区域的宽度. 一两年前曾经遇到过这个需求,当时直接在网上搜了个解决方案贴上去了,不过那个解决方案很挫. 这次的项目又遇到这个需求,而且是三个块的拖动.不仅需要左右拖动还需要上下拖动. 在这里特地记录下解决方案,也希望可以得到一些反馈与优化. 方案的思路 横条拖动和竖条拖动…

不定宽高的DIV，垂直水平居中

1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:middle;// Div设置: display:inline-block; vertical-align:middle;// 2)使用CSS3 transform. 父盒子设置:position:relative Div设置:transform: translate(-50%,-50%);positi…

css中固定宽高div与不固定宽高div垂直居中的处理办法

固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-top:-50px; 不固定高宽div垂直居中的方法 方法一(此div元素应是 inline-block): 用一个"ghost"伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧…

table 与 div 固定宽高问题

div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{table-layout:fixed;width:200px;height:200px; }td {width:100px;height:200px;overflow:hidden;} 这个只能固定td的宽度,而高度随内容增加而增高:若也要固定其高度,则需要在td中嵌套使用div,包住content,…

我的前端组件 ---- 16:9固定宽高比例的div

目标:遇到一个需求,让图片在页面中,不管宽度如何变化.宽高保持16:9的比例. 实现: 方法一:这也是比较经典的一个方法,利用padding-bottom来实现. <!DOCTYPE html> <html> <head> <title>固定宽高比16:9</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .wrap{ width:100…

偏前端 - 不是固定宽高，页面随设备同比 放大/缩小 展示。不妨看看rem单位，你就有眉目上手做了！！！

为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推. 但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊. Px是相对固定单位,字号大小直接被定死,所以用户无法根据自己设置的浏览器字号而缩放,em和rem虽然都是相对单位,但em是相对于它的父元素的font-size,页面层级越深,em的换算就越复杂,而rem是直接相对于根元素,这就避开了…

已知宽高和未知宽高的div块的水平垂直居中

//已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } .div1_center{     position:absolute;     top:50%;     left:50%;     margin:-100px 0 0 -100px;     width:200px;     height:200px;     border:1px solid…