<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>上下居中</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
body,p,div{ margin: 0; padding: 0;}
/*For Firefox Chrome*/
.box { border:1px #ddd solid; height:300px; overflow:hidden; display:table; margin:50px; position:relative;}
.box .text{display:table-cell;vertical-align:middle;}
/*For IE7*/
*+html .box .text{ display: block; position:absolute; top:50%; width:100%; height:auto;}
*+html .box .text p{ position:relative; top:-50%;}
/*For IE6*/
*html .box .text{position:absolute; top:51%; width:100%; height:auto; display:block;}
*html .box .text p{position:relative; top:-50%;}
</style>
</head>
<body>
<div class="box">
<div class="text">
<p>
这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
</p>
</div>
</div>
</body>
</html>
分享到：
相关推荐
在网页设计中，让多行文字在`div`元素中垂直居中是一项常见的需求，尤其在构建响应式布局和用户界面时。实现这个效果的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些主要的策略来实现`div`中多行文字的...
css 多行文本垂直居中显示，兼容各大浏览器！
以上就是使用div和CSS实现多行文字垂直居中的几种常见方法，每种都有其适用场景和兼容性考虑。在实际项目中，应根据具体需求和目标浏览器范围选择合适的方法。在提供的"多行文字实现垂直居中.html"文件中，你可以...
以下是对单行和多行文字垂直居中的一些常见方法。 一、单行文字垂直居中 对于只有一个行的文本，我们可以利用`line-height`属性来实现垂直居中。设置`div`的高度与`line-height`相等，就能使文本在垂直方向上居中...
继承mfc的static类，实现可设置字体、字体大小、粗体、斜体，文字在水平方向和垂直方向上居中显示；而且还能根据控件大小自动缩小文字大小以防止文字出界显示不全。但目前还存在bug：若设置为粗体显示，文字显示还是...
在给定的标题“TextBlock控件文字垂直居中源码”和描述中，我们可以推断这是一个关于如何实现TextBlock控件内文字垂直居中的源代码示例，适用于Visual Studio 2010开发环境。 首先，让我们理解一下WPF中TextBlock的...
除了使用table方法外，还有另外一种实现多行文字垂直居中的方式，即通过给DIV添加等量的上下内边距（padding）。这种方法的操作原理是利用内边距来模拟单行文字垂直居中的效果，即通过设置一致的`padding-top`和`...
一、大小不固定，多行文字的垂直居中 ① 单行文字 可能很多人都知道如何让单行文字垂直... 这里的文字用来做多行文字垂直居中对齐的测试。这是第二行文字，您还可以再添加一行文字做测试！这是隐藏的第三行文字，注意
标题中的“懒人原生纯css实现多行文字均保持垂直居中效果”是指一种无需依赖JavaScript库（如jQuery）或HTML5特定属性，仅通过CSS实现的多行文本垂直居中的技术。这种技术在网页设计中十分常见，因为用户界面的对齐...
在网页设计中，实现多行文字水平垂直居中是一项常见的需求，尤其是在响应式布局和用户界面设计中。本文将探讨一种通过CSS实现这一效果的方法，以及针对出现的问题进行的解决方案。 首先，我们来看一个常见的水平...
当我们需要实现CEdit框中的字体垂直居中时，这是一个常见的需求，尤其在创建用户界面时，为了提供更好的视觉效果。本篇文章将详细探讨如何实现这一功能。 首先，我们需要理解CEdit控件的基本属性。CEdit控件允许...
效果描述： 在实际网页中，如何实现如何实现父容器... 然后用处理图片垂直居中的方式处理文字的垂直居中即可。 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可
首先，对于大小不固定的多行文字垂直居中，我们可以采用以下策略： 1. **单行文字**：通过设置`line-height`等于外部容器的高度，可以轻松实现单行文字的垂直居中。例如： ```css .container { height: 3em; ...
2. **多行未知高度文字的垂直居中** 当`div`内的文本行数不确定，高度可变时，可以设置上下相同的`padding`值来实现视觉上的垂直居中。如下所示： ```css div { padding: 25px; } ``` 这种方法适用于所有...
对于多行文字，可以使用 padding 属性设置上下的 padding 值相同，以实现垂直居中。这种方法也是一种“看起来”的垂直居中方式，它使文字将完全填充。 代码示例： ``` div { padding: 25px; } ``` 这种方法的优点...
在Android开发中，有时我们需要在同一个TextView中展示不同大小的文字，并让它们保持垂直居中对齐。这可以通过使用SpannableString来实现。SpannableString是Android SDK提供的一种可操作字符串对象，允许我们在字符...
多行文字垂直居中，通过设置相同的内上下边距 `padding-top` 和 `padding-bottom` 就可以实现。 ``` ##### 方法解析 - 在此示例中，`#text` 的内上边距和内下边距均被设置为 `20px`，这样即使文本有多行，也...