`
hwpok
  • 浏览: 251873 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

DIV水平垂直居中

    博客分类:
  • Html
阅读更多

<style>
    body {padding: 0; margin: 0;}
    body,html{height: 100%;}
    #outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
    #outer[id] {display: table; position: static;}
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {display: table-cell; vertical-align: middle; position: static;}
    #inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
    div.greenBorder {border: 1px solid green; background-color: ivory;}
</style>

<div id="outer">
  <div id="middle">
      <div id="inner" class="greenBorder">sdasdasdasdasdasd
      </div>
  </div>
</div>
思考:DIV水平垂直居中的新方法(不允许套table).

分享到:
评论

相关推荐

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    DIV+CSS水平垂直居中

    DIV+CSS 水平垂直居中网页学习 DIV+CSS 水平垂直居中是Web开发中一个常见的问题,如何将DIV元素水平垂直居中是一个非常重要的知识点。本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:...

    PeterChen1997#Frontend-Repo#2-div水平垂直居中方法1

    div水平垂直居中方法绝对定位(margin:auto实现居中)/* margin设置为auto实现绝对定位元素的垂直居中 */绝对定位(margin 负值实现

    DIV居中及DIV垂直居中.html

    该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.

    div水平垂直居中的完美解决方案

    总结来说,`div`的水平垂直居中可以通过传统的`margin`设置、绝对定位或者使用Flexbox布局来实现。每种方法都有其适用场景和局限性,开发者可以根据项目需求选择合适的方法。在实际开发中,考虑到浏览器兼容性和性能...

    在DIV中图片垂直/水平居中(最简单方法).rar

    在网页设计中,将图片在div中垂直和水平居中是一项常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标,同时也会涉及JavaScript(JS)的一些特效,尽管在描述中没有明确指出...

    图片水平垂直居中

    在网页设计中,让图片水平垂直居中是一个常见的需求,特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标,适用于各种现代浏览器。 首先,我们可以...

    div+css垂直居中和水平居中

    7. **水平垂直居中**: 结合以上方法,可以同时实现水平和垂直居中: ```css .container { display: flex; justify-content: center; align-items: center; } ``` 或者使用CSS Grid: ```css .container ...

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

    让DIV水平垂直居中的两种完美方法推荐

    今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中。...

    CSS定位“十字架”之水平垂直居中

    本文为大家分享了CSS定位“十字架“之水平垂直居中效果的实现方法,具体内容如下 1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中... /*定位父级div水平垂直居中*/

    CSS 图片水平垂直居中于DIV

    在网页设计中,将图片水平垂直居中于一个DIV元素是常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何实现这个效果,并提供相关的源码示例。 首先,我们要明白CSS中的定位机制,包括静态定位、相对定位、...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`&lt;div&gt;`元素是一...

    垂直居中显示ie7+

    在网页设计中,"垂直居中显示"是一个常见的需求,特别是在多设备、多屏幕尺寸的环境下,确保元素在页面上无论何时都能保持居中状态,能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...

    jquery计算出left和top,让一个div水平垂直居中的简单实例

    总的来说,这个jQuery实例提供了一种动态、适应性地使div水平垂直居中的方法,考虑到了页面滚动的影响。这种方法适用于那些需要根据窗口大小变化或页面滚动保持居中状态的元素。在实际项目中,可以灵活应用并进行...

    DIV水平垂直居中css实现代码

    在网页设计中,将一个`DIV`元素水平垂直居中是常见的需求,特别是在构建响应式布局或者需要创建弹窗、对话框等组件时。本文将详细介绍如何使用CSS来实现`DIV`的水平垂直居中,并提供相关的代码示例。 首先,我们...

    div不定宽高的水平和垂直居中

    综上所述,针对“div不定宽高的水平和垂直居中”以及兼容IE67的需求,我们可以选择使用CSS传统方法(如绝对定位)或者结合JavaScript来实现。考虑到不同的浏览器兼容性和场景适应性,应根据实际项目需求来选择最合适...

Global site tag (gtag.js) - Google Analytics