用过 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:
/* 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实现垂直居中有多种方法,每种方法都有其适用场景和限制。开发者需要根据项目需求和目标浏览器范围选择合适的技术。随着技术的发展,如Flexbox和Grid布局的普及,实现垂直居中变得更加便捷和一致,但也...
根据标题"CSS实现垂直居中的几种实现方式"以及描述中提到的内外元素高度情况,我们可以深入探讨几种常用的垂直居中方法。 首先,当内外元素高度全部确定时,有以下几种常见策略: 1. **使用line-height**:这是一...
本文将总结几种常用的 CSS 垂直居中方法。 1. 单行垂直居中 对于单行文字,可以使用设置高度和行高相等的方法实现垂直居中。这种方法简单易行,但需要注意 overflow:hidden 的设置,以防止内容超出容器或产生自动...
以下将详细阐述几种常用的CSS图片垂直居中的技术。 1. **Flexbox布局** Flexbox是现代CSS布局模式,特别适用于一维布局,如行或列。要让图片垂直居中,可以设置容器为flex容器,并使用`align-items: center;`属性...
以上就是使用div和CSS实现多行文字垂直居中的几种常见方法,每种都有其适用场景和兼容性考虑。在实际项目中,应根据具体需求和目标浏览器范围选择合适的方法。在提供的"多行文字实现垂直居中.html"文件中,你可以...
在压缩包中的“TextBlockVerticalAlignment”文件可能包含了具体的源代码示例,可能使用了上述方法之一,或者通过自定义布局容器(如ViewBox)或者使用Grid和RowDefinitions来实现垂直居中效果。这些方法通常会涉及...
要实现TextBox在Panel中的垂直居中,通常有以下几种方法: 1. **使用Anchor属性**:将TextBox的Anchor属性设置为Top和Bottom,这样TextBox会根据Panel的高度自动调整自身的高度并保持上下边距相等,从而实现居中。...
接下来,我们将探讨几种实现垂直居中的方法: 1. **Flexbox布局** - CSS Flexible Box Layout Module(Flexbox)是现代浏览器支持的布局模型,非常适用于创建弹性容器和元素的居中。以下代码演示了如何使用Flexbox...
实现CEdit控件的垂直居中,通常需要涉及到以下几个关键步骤: 1. **创建CEdit控件**:首先,开发者需要在窗口类的资源脚本中定义CEdit控件,或者在代码中动态创建。通过`Create`函数指定CEdit的属性,如ID、位置和...
以上就是实现"垂直居中ie8+"的几种主要方法。在实际项目中,应根据目标浏览器范围、项目需求以及性能因素选择合适的技术。对于更现代的浏览器,推荐使用Flexbox或CSS Grid,因为它们提供了更强大的布局控制和更好的...
3. **垂直居中**:实现文本垂直居中可能需要调整控件的内部布局,以及在绘制时计算正确的文本位置。这通常涉及到CRect对象的使用,以及DrawText()函数的DT_VCENTER参数。 4. **字体颜色和背景色设置**:自定义绘制...
以下就是CSS实现水平垂直居中的几种常见方法: 1. 利用margin:auto实现居中 这是一种常见的居中方式,通常用于块级元素。通过设置元素的position属性为relative,并把left和top属性设为0,再将margin设为auto,...
"CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的,以下是几种常见的实现方式: 1. 容器内(Within Container) 在容器内实现垂直居中水平居中可以通过设置容器的 ...
首先,我们来探讨CSS中的几种水平垂直居中方法: 1. **Flexbox布局**:这是现代浏览器支持的一种布局方式,可以轻松实现子元素的水平和垂直居中。设置父元素的`display`属性为`flex`,然后添加`align-items: center...
本文将深入探讨四种不同的CSS方法,用于实现图片在div容器内的垂直居中,每种方法都有其适用场景和独特之处。 ### 第一种方法:使用`table-cell`属性 这种方法的核心在于将div设置为`table-cell`,这样可以使其...
本文将介绍几种有效的CSS垂直居中方法,以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式,然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
以下将详细讲解几种常用且有效的CSS居中方法。 1. **水平居中** - **Text-align属性**:适用于内联元素或块级元素容器。设置`text-align: center;`可以使容器内的文本和内联元素水平居中。 ```css .container...
今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路: 一、利用 position 和负边距 利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
以上就是CSS实现图片垂直居中的几种常见方法。在实际开发中,应根据项目需求和浏览器兼容性选择合适的方法。对于老旧的浏览器,可能需要采用更传统的解决方案,如使用`table-cell`或JavaScript辅助。同时,随着技术...
在"Horizontalverticalalignment水平垂直居中的实现方式"这个主题中,我们将深入探讨多种方法,包括使用CSS、JavaScript以及现代布局技术如Flexbox和Grid。 首先,我们来看CSS中的传统方法。传统的CSS解决方案通常...