`
zuoming99
  • 浏览: 140812 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS 完美简易华丽的垂直居中

htmlcss垂直居中 
阅读更多

支持IE6 7 8，Firefox，Chrome，Opera，Safari 利用了一点float的小技巧

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        html,body{height:100%;margin:0;}
        body{padding:1px;}
        #mid-helper {
            float: left;
            height: 50%;
            margin-bottom: -120px;

            width: 10px; /*测试用，可删除*/
            background-color: orange;  /*测试用，可删除*/
        }
        #mid {
            clear: both;
            height: 240px;

            background-color: #8fbc8f;  /*测试用，可删除*/
            opacity: .7;  /*测试用，可删除*/
            filter:alpha(opacity=70);  /*测试用，可删除*/
        }
    </style>
</head>
<body>

<div id="mid-helper">
</div>
<div id="mid">
    this is the #mid element
</div>

</body>
</html>


预览图：


  • 大小: 7.8 KB
分享到：
| 巧用 UserAgent 代替拙劣的 CSS hack
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    DIV+CSS 图片垂直居中效果

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

    CSS 图片水平垂直居中于DIV

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

    js+CSS 图片等比缩小并垂直居中实现代码.docx

    JS+CSS 实现图片等比缩小并垂直居中 在网页开发中，图片的缩放和垂直居中是非常常见的需求，而本文将介绍使用 JS+CSS 来实现图片等比缩小并垂直居中的代码。 首先，在 HTML 中，我们需要定义一个容器元素 `...

    纯CSS定位的固定垂直居中浮动层代码，附经典解说：《详解定位与定位应用》

    在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实...

    图片水平垂直居中

    首先，我们可以使用CSS的Flexbox布局来实现图片的水平垂直居中。Flexbox是一个强大的容器模型，它允许我们轻松地调整子元素的布局、对齐和分布，而无需复杂的定位技巧。 1. 创建一个包含图片的容器： ```html `...

    css水平垂直居中

    ### CSS 水平垂直居中的实现方法 在前端开发中，经常需要将元素在页面中进行水平垂直居中处理，特别是在响应式布局或者需要精确控制元素位置的情况下尤为重要。本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直...

    图片 CSS垂直居中

    图片 CSS垂直居中图片 CSS垂直居中

    垂直居中.docx

    CSS 垂直居中方法总结 在 CSS 中实现垂直居中有多种方法，这些方法可以应用于不同的场景。本文将总结几种常用的 CSS 垂直居中方法。 1. 单行垂直居中 对于单行文字，可以使用设置高度和行高相等的方法实现垂直...

    CSS让图片垂直居中和底端对齐的代码

    本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码： &lt;!DOCTYPE ...

    CSS实现垂直居中的5种方法.rar

    本教程将详细讲解5种有效的CSS方法，帮助你掌握垂直居中的技巧。 1. **Flexbox布局** Flexbox是现代CSS布局模型，特别适合处理容器内子元素的对齐问题。要实现垂直居中，首先设置容器的`display`属性为`flex`，...

    css图片垂直居中 css中如何实现图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...

    使用css实现div垂直居中的示例

    本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...

    多行文字实现垂直居中

    本话题主要探讨如何使用div和CSS技术来实现多行文本的垂直居中，并且使高度能够自适应内容的变化。 首先，我们来看一个基本的HTML结构，它包含一个div容器，里面有多行文字： ```html 这是一段多行文字 内容...

    CSS教程之div垂直居中的多种方法

    在CSS布局中，垂直居中是一项常见的需求，尤其是在网页设计中。本文主要讲解了如何使用CSS实现div元素以及其中多行文本的垂直居中。首先，我们要明确CSS中的`vertical-align`属性并不能直接用于所有元素，它仅适用于...

    网页图片垂直居中

    在网页设计中，让图片或其他元素垂直居中是一项常见的需求，尤其在响应式设计和现代网页布局中尤为重要。本文将详细介绍如何实现网页图片的垂直居中，并提供多种方法供参考。 1. **CSS Flexbox** Flexbox是CSS3中的...

    垂直居中ie8+

    在IE8+支持CSS的多种方法，使得开发者能够灵活地处理不同场景下的垂直居中问题。下面我们将详细探讨几种主要的垂直居中技术及其应用。 1. **表格布局（Table-Cell Display）** 使用CSS的`display`属性设置为`table...

    css实现垂直居中的方法

    ### CSS 实现垂直居中的五种方法 在前端开发中，如何使元素在页面中垂直居中是一项常见的需求。本文将详细介绍五种不同的方法来实现这一目标，并对每种方法的特点进行分析，以便开发者根据实际情况选择最合适的方案...

    CSS2.1如何让块元素垂直水平居中.rar

    在网页设计中，让元素在页面上垂直和水平居中是一项常见的需求，特别是在CSS2.1规范中。本文将深入探讨如何使用CSS2.1来实现这一目标，无论是对于已知宽高还是未知宽高的块级元素（div）。首先，我们需要理解CSS布局...

    div垂直居中的N种方法

    本文将深入探讨并演示多种实现DIV垂直居中的方法，包括但不限于使用CSS的`height`, `line-height`, `padding`, `display`属性，以及如何通过`vertical-align`属性配合特定的HTML结构来达到目标。 #### 方法一：...

Magicbox
Global site tag (gtag.js) - Google Analytics