`

垂直居中 小记

    博客分类:
  • css
 
阅读更多
	
		/*   top:50%   margin-top:-35px    */
			.wrap{
				height: 200px;
				width: 200px;
				border: 4px solid #BBBBBB;
				position: relative;
			}
			.inner{
				position:absolute;
				height: 70px;
				width: 120px;
				background-color: #FFBFBF;
				top:50%;
				margin-top:-35px;			
			}

<div class="wrap">
    <div class="inner"></div>
</div>
//==============================================================================//==============================================================================		
	
		/* td{vertical-align: middle;}*/
			td{
				vertical-align: middle;
				border: 4px solid #BBBBBB;
				height: 200px;
				width: 200px;
			}
			.tddiv{
				height: 70px;
				width: 120px;
				background-color: #FFBFBF;
			}
			
<table>
	<tr>
	   <td><div class="tddiv"></div></td>
	</tr>
</table>
//==============================================================================
//==============================================================================

		/*div { display:table; }
		  p{ display:table-cell; vertical-align:middle; }
		*/
			.wrap2{
				display:table;
				height: 200px;
				width: 200px;
				border: 4px solid #BBBBBB;
			}
			.inner2{
				display:table-cell;
				vertical-align: middle;
			}

<div class="wrap2">
	<p class="inner2">content</p>
</div>

//==============================================================================
//==============================================================================
			
		/*多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%*/
			.wrap3{
				height: 200px;
				width: 200px;
				border: 4px solid #BBBBBB;
				position: relative;
			}
			.hack{
				position:absolute;
				height: 70px;
				width: 120px;
				background-color: #FFBFBF;
				top:50%;
			}
			.inner3{
				height: 70px;
				width: 120px;
				background-color: 	#82E0FF;
				position: absolute;
				top:-50%;
			
			}
<div class="wrap3">
	<div class="hack">
		<div class="inner3"></div>
	</div>
</div>

//参考自:http://sofish.de/1909






分享到:
评论

相关推荐

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

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

    VB文本框TEXTBOX文字垂直居中

    TextBox控件在默认情况下,其文字是水平居中的,但不支持直接的垂直居中对齐。针对这个特点,开发者们通常需要通过一些技巧来实现文本在TextBox中的垂直居中效果。本主题将详细介绍如何在VB中实现这一功能。 首先,...

    CEdit框字体垂直居中

    当我们需要实现CEdit框中的字体垂直居中时,这是一个常见的需求,尤其在创建用户界面时,为了提供更好的视觉效果。本篇文章将详细探讨如何实现这一功能。 首先,我们需要理解CEdit控件的基本属性。CEdit控件允许...

    Winform TextBox支持垂直居中自定义控件

    在给定的标题和描述中,我们看到开发者已经实现了一个这样的自定义控件,它不仅支持文字垂直居中,而且在开启自动折行(WordWrap=True)时也能保持垂直居中的效果。 首先,让我们深入了解如何在C#中创建自定义控件...

    图片水平垂直居中

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

    TextBlock控件文字垂直居中源码

    在给定的标题“TextBlock控件文字垂直居中源码”和描述中,我们可以推断这是一个关于如何实现TextBlock控件内文字垂直居中的源代码示例,适用于Visual Studio 2010开发环境。 首先,让我们理解一下WPF中TextBlock的...

    垂直居中显示ie7+

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

    CSS实现完美垂直居中 - 蓝色理想

    在网页设计中,CSS(Cascading Style Sheets)布局是一个重要的方面,而垂直居中问题则是许多开发者在创建响应式和动态网页时常常遇到的挑战。"CSS实现完美垂直居中"这一主题深入探讨了如何利用CSS技术使元素在容器...

    教你如何把Winform TextBox 垂直居中的类文件

    然而,有时我们需要让TextBox在容器内垂直居中显示,这可能需要一些额外的布局设置或自定义代码。这篇教程将指导你如何创建一个类文件,实现Winform TextBox的垂直居中功能。 首先,理解Windows Forms的布局机制是...

    CEdit 垂直居中,完美解决

    【标题】"CEdit 垂直居中,完美解决"所涉及的知识点主要集中在Windows API编程中的CEdit控件的样式调整,以及如何在Windows应用程序中实现文本或输入框的垂直居中显示。CEdit是Windows API提供的一种标准编辑控件,...

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

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

    VC组合框文本垂直居中

    在VC++编程环境中,"VC组合框文本垂直居中"是一个常见的需求,涉及到窗口控件的自定义绘制和样式调整。这个主题主要包括以下几个关键知识点: 1. **VC组合框(ComboBox)**:ComboBox是Windows API中的一种控件,...

    CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx

    CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中,实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果,并对每种方法的优缺点进行分析。 一、...

    文本框控件可以使文字垂直居中

    大多数文本框中文字都垂直靠上,很不美观,该控件使文字垂直居中。

    垂直居中.docx

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

    VCenterEdit一个比较完美的文本垂直居中的CEdit类

    VCenterEdit一个比较完美的文本垂直居中的CEdit类。该类来源于网络上的CVEdit类,加入了处理ReadOnly栏目的代码,构成一个比较实用的VCenterEdit一个比较完美的文本垂直居中的CEdit类。供大家参考交流。经测试,可以...

    textbox垂直居中

    本主题聚焦于一个常见的设计需求——"textbox垂直居中"。TextBox控件是Windows应用程序中常用的一种输入元素,用户可以在这里输入文本。在某些设计中,为了提升用户体验,我们希望TextBox能被垂直居中显示在容器内,...

    四种垂直居中的方法

    position: absolute,display:table-cell,display:flex四种垂直居中的方法

    DIV+CSS水平垂直居中

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

Global site tag (gtag.js) - Google Analytics