`
齐晓威_518
  • 浏览: 618056 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

垂直居中的几种实现方法 .

 
阅读更多

用过 Fireworks / PhotoShop 的人应该都知道,在画布中将一个页面模块居中是多容易的事,可如果是垂直居中,前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全)。今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:

一、利用 position 和负边距

利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明:

垂直居中

 

/* 代码实现:
 * 设定宽度和高度,父节点为 position:relative; CSS是这样写的:
 */
.selector {
     position:absolute;top:50%;。
     margin-top:-元素自身高度的一半;
}

 二、使用 <table />

<table /> 真是各种好用,她是各种布局、居中的法宝。垂直居中对其来说,也是非常简单的事。table cells 的 vertical-align:middle 就可以直接解决。所以实现起也来只要这样一行代码:

td{ vertical-align:middle; }

三、通用解决方案

使用第一方案的问题是,通常我们需要垂直居中的元素高度都是不确实的。这里我们需要用 JS 来实现高度的计算,再实现负边;而第二种方案的局限在于只应用于 <table />。其实是,我们可能综合这两种方法,来做一个 Hack。

像我们知道的,在 CSS2.1 中,任何元素都可以使用 display:table / display:table-cell来实现与 table 一样的功能。那么,只要支持 display:table 的浏览器,已经可以轻松解决,只要这样写代码:

<!-- DOM 结构 -->
<div>
    <p>content</p>
</div>

/* CSS 实现 */
div { display:table; }
p{ display:table-cell; vertical-align:middle; }

但问题是,这种方法在 IE6/7 是不能实现的,因为他们不支持 display:table 这个特性。那有没有办法不计算高度,利用第一种方案来实现垂直居中呢?其实也未尝不可。看看下面这个 DOM 结构和图示:

<div class="wrap">
    <div class="hack">
        <div class="cnt">
            content
        </div>
    </div>
</div>

垂直居中

其实我们只要加多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%。如上图所示。这里有一个 DEMO:

垂直居中最终方案: DEMO

/* CSS 部分的代码实现:整体代码参见上述 demo*/
.wrap{
    width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;
    *position:relative;
}
.hack{
    display:table-cell;vertical-align:middle;
    *position:absolute;*top:50%;
}
.cnt{
    *position:relative;*top:-50%;
}
分享到:
评论

相关推荐

    CSS实现垂直居中的几种实现方式.pdf

    总的来说,CSS实现垂直居中有多种方法,每种方法都有其适用场景和限制。开发者需要根据项目需求和目标浏览器范围选择合适的技术。随着技术的发展,如Flexbox和Grid布局的普及,实现垂直居中变得更加便捷和一致,但也...

    CSS实现垂直居中的几种实现方式.docx

    根据标题"CSS实现垂直居中的几种实现方式"以及描述中提到的内外元素高度情况,我们可以深入探讨几种常用的垂直居中方法。 首先,当内外元素高度全部确定时,有以下几种常见策略: 1. **使用line-height**:这是一...

    垂直居中.docx

    本文将总结几种常用的 CSS 垂直居中方法。 1. 单行垂直居中 对于单行文字,可以使用设置高度和行高相等的方法实现垂直居中。这种方法简单易行,但需要注意 overflow:hidden 的设置,以防止内容超出容器或产生自动...

    css图片垂直居中方法

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

    多行文字实现垂直居中

    以上就是使用div和CSS实现多行文字垂直居中的几种常见方法,每种都有其适用场景和兼容性考虑。在实际项目中,应根据具体需求和目标浏览器范围选择合适的方法。在提供的"多行文字实现垂直居中.html"文件中,你可以...

    TextBlock控件文字垂直居中源码

    在压缩包中的“TextBlockVerticalAlignment”文件可能包含了具体的源代码示例,可能使用了上述方法之一,或者通过自定义布局容器(如ViewBox)或者使用Grid和RowDefinitions来实现垂直居中效果。这些方法通常会涉及...

    textbox垂直居中

    要实现TextBox在Panel中的垂直居中,通常有以下几种方法: 1. **使用Anchor属性**:将TextBox的Anchor属性设置为Top和Bottom,这样TextBox会根据Panel的高度自动调整自身的高度并保持上下边距相等,从而实现居中。...

    图片的水平垂直居中

    接下来,我们将探讨几种实现垂直居中的方法: 1. **Flexbox布局** - CSS Flexible Box Layout Module(Flexbox)是现代浏览器支持的布局模型,非常适用于创建弹性容器和元素的居中。以下代码演示了如何使用Flexbox...

    CEdit 垂直居中,完美解决

    实现CEdit控件的垂直居中,通常需要涉及到以下几个关键步骤: 1. **创建CEdit控件**:首先,开发者需要在窗口类的资源脚本中定义CEdit控件,或者在代码中动态创建。通过`Create`函数指定CEdit的属性,如ID、位置和...

    垂直居中ie8+

    以上就是实现"垂直居中ie8+"的几种主要方法。在实际项目中,应根据目标浏览器范围、项目需求以及性能因素选择合适的技术。对于更现代的浏览器,推荐使用Flexbox或CSS Grid,因为它们提供了更强大的布局控制和更好的...

    VC组合框文本垂直居中

    3. **垂直居中**:实现文本垂直居中可能需要调整控件的内部布局,以及在绘制时计算正确的文本位置。这通常涉及到CRect对象的使用,以及DrawText()函数的DT_VCENTER参数。 4. **字体颜色和背景色设置**:自定义绘制...

    CSS水平垂直居中的几种方法总结

    以下就是CSS实现水平垂直居中的几种常见方法: 1. 利用margin:auto实现居中 这是一种常见的居中方式,通常用于块级元素。通过设置元素的position属性为relative,并把left和top属性设为0,再将margin设为auto,...

    [css]实现垂直居中水平居中的几种方式 - 霪霖笙箫 - 博客园1

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

    DIV水平垂直居中

    首先,我们来探讨CSS中的几种水平垂直居中方法: 1. **Flexbox布局**:这是现代浏览器支持的一种布局方式,可以轻松实现子元素的水平和垂直居中。设置父元素的`display`属性为`flex`,然后添加`align-items: center...

    图片垂直居中的代码的几种方法

    本文将深入探讨四种不同的CSS方法,用于实现图片在div容器内的垂直居中,每种方法都有其适用场景和独特之处。 ### 第一种方法:使用`table-cell`属性 这种方法的核心在于将div设置为`table-cell`,这样可以使其...

    CSS实现垂直居中的几种方法

    本文将介绍几种有效的CSS垂直居中方法,以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式,然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...

    WEB前端CSS居中的几种方法共4页.pdf.zip

    以下将详细讲解几种常用且有效的CSS居中方法。 1. **水平居中** - **Text-align属性**:适用于内联元素或块级元素容器。设置`text-align: center;`可以使容器内的文本和内联元素水平居中。 ```css .container...

    css 垂直居中的几种实现方法

    今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路: 一、利用 position 和负边距 利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...

    css图片垂直居中

    以上就是CSS实现图片垂直居中的几种常见方法。在实际开发中,应根据项目需求和浏览器兼容性选择合适的方法。对于老旧的浏览器,可能需要采用更传统的解决方案,如使用`table-cell`或JavaScript辅助。同时,随着技术...

    Horizontalverticalalignment水平垂直居中的实现方式

    在"Horizontalverticalalignment水平垂直居中的实现方式"这个主题中,我们将深入探讨多种方法,包括使用CSS、JavaScript以及现代布局技术如Flexbox和Grid。 首先,我们来看CSS中的传统方法。传统的CSS解决方案通常...

Global site tag (gtag.js) - Google Analytics