`
zuoming99
  • 浏览: 140781 次
  • 性别: 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图片垂直居中方法

    以下将详细阐述几种常用的CSS图片垂直居中的技术。 1. **Flexbox布局** Flexbox是现代CSS布局模式，特别适用于一维布局，如行或列。要让图片垂直居中，可以设置容器为flex容器，并使用`align-items: center;`属性...

    css多行文本垂直居中

    css 多行文本垂直居中显示，兼容各大浏览器！

    DIV+CSS水平垂直居中

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

    CSS 图片水平垂直居中于DIV

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

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

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

    图片水平垂直居中

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

    css水平垂直居中

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

    图片 CSS垂直居中

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

    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]实现垂直居中水平居中的几种方式 - 霪霖笙箫 - 博客园1

    "CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的，以下是几种常见的实现方式： 1. 容器内（Within Container） 在容器内实现垂直居中水平居中可以通过设置容器的 ...

    网页图片垂直居中

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

    垂直居中ie8+

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

    css实现垂直居中的方法

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

    CSS网页布局：div垂直居中的各种方法

    在CSS布局中，垂直居中是一项常见的需求，但相比水平居中，它的实现方式更为多样且复杂。在本文中，我们将探讨如何通过不同的方法在网页布局中实现div元素的垂直居中。 首先，我们注意到CSS的`vertical-align`属性...

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