`

DIV的上下左右均居中

    博客分类:
  • CSS
 
阅读更多
主要用于弹出框,用css实现。
div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -200px;
  width: 400px;
  height: 300px;
  background-color: #CCC;
}


核心思路:
第一步:定位到屏幕中央,即top和height都用50%
第二步:用margin的负值,使div向上和向左分别移动高度和跨度的一半。

分享到:
评论

相关推荐

    DIV+CSS上下左右绝对居中

    为了让 `centered-content` 在 `container` 内部上下左右居中,我们可以利用以下几种方法: 1. **使用 Flexbox**: Flexbox 是现代CSS布局模式,特别适合处理元素的对齐和分布。对于上下左右绝对居中,我们可以...

    div中套用div的文本上下左右居中的css

    css:可以令层中层上下左右居中。(即:div之中的div的文本,上下左右居中显示)

    html div 自适应剧中 上下左右全部居中

    html div 自适应剧中 上下左右全部居中

    jquery实现div上下左右居中显示的js代码

    它可以判断外部div以及内部div的宽度高度,从而实现上下左右居中的目的,兼容主要浏览器 使用方法简单: 1、确保head中引入jquery库以及本例的css样式 2、将代码部分拷贝到你需要的地方 3、在代码...

    DIV+CSS DIV居中布局

    /* 自动左右外边距实现居中 */ } ``` 2. **Flexbox**: CSS3的Flexbox布局模型提供了更强大的控制能力。在父元素上设置`display: flex;`,然后使用`justify-content: center;`可以让子元素水平居中。例如: ``...

    div 图片上下居中,左右居中

    div 图片上下居中,左右居中 ,兼容多版本浏览器

    让Div层上下左右都居中的方法

    让Div层上下左右都居中的方法! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    css中position:fixed实现div居中上下左右居中

    在CSS布局技术中,使DIV元素在浏览器窗口中上下左右居中是一个常见的需求。通过使用CSS的定位属性,我们可以通过多种方法来实现这一效果。本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 ...

    懒人原生移动端(高版本浏览器)上下左右居中模块

    相关链接如下:纯css实现div容器内图片上下左右居中效果 今天再给大家介绍一个部分基于css3的上下左右垂直居中效果 大家都知道给一个div设置相对定位,左侧、顶部的高度分别设置50% 剩下的靠margin解决...

    jquery实现div上下左右居中显示的插件.zip

    标题中的“jquery实现div上下左右居中显示的插件.zip”指的是一个基于jQuery的JavaScript插件,用于在网页中使div元素实现垂直和水平居中显示。这种功能在网页设计和开发中非常常见,尤其在创建响应式布局或动态内容...

    jquery.valign插件实现图片,文字上下左右垂直居中

    此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果,缺点是采用了部分css3样式,兼容性较差,相关链接:纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign,可...

    一个上下左右都居中的CSS+html写法

    上下左右都居中的CSS+html写法,position:absolute;top:50%;margin-top:-50px;left:50%;margin-left:-50px;

    div完美自适应动态上下左右居中

    复制代码代码如下: div { position:absolute; width:500px; height:260px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; } 文字居中:text-align:center; height:22px;line-height:22px;...

    纯css实现div容器内图片上下左右居中效果

    一款不需要任何JS即可控制图片上下左右居中的效果 以前以为必须要JS才能控制图片上下居中的,现在才发现原来css也有这个本事 一半只有table,默认图片才会上下居中,现在只需要加几行css即可实现,高级。使用方法...

    图片上下左右居中不变形解决方案

    resizepic 根据图片的实际比例适用外层div的大小,或左右居中显示 或上下居中显示。 完美解决图片缓存后不执行onload事件的情形。兼容 ie ff 谷歌

    纯css实现div容器内图片上下左右居中效果.zip

    本资源"纯css实现div容器内图片上下左右居中效果.zip"提供了一个使用纯CSS实现图片在div容器内完全居中的解决方案。下面将详细解释这一技术及其背后的原理。 首先,我们关注的是“纯CSS”方法,这意味着我们将不...

    盒子上下左右居中设置

    本文将深入探讨如何使用HTML5和CSS来实现盒子(div元素)的上下左右居中设置。 首先,我们需要理解CSS中的定位机制。在CSS中,有三种主要的定位方式:正常流定位、浮动定位和绝对定位。正常流定位是元素默认的布局...

    jQuery实现上下左右垂直居中.zip

    "jQuery实现上下左右垂直居中.zip" 提供的是一个名为 "jquery.valign" 的插件,它专用于解决HTML元素(如图片、文字)在div容器内部的垂直对齐问题。下面将详细介绍这个插件的工作原理以及如何使用。 `jQuery....

    css实现div内图片上下左右居中

    DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内的图片高度是不一定的,那么只有用table了,我想大多数...

Global site tag (gtag.js) - Google Analytics