html中div中文字如何上下居中,div中文字各种垂直居中的方法

前言

在前端开发的过程中经常会遇到需要对div中的文字进行垂直居中，下面总结了几种实现的方式。

1. 单行文字div中垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

看你是不是垂直居中的

div {

height: 200px;

line-height: 200px;

border: 1px solid #FF0099;

background-color: #FFCCFF;

text-align: center

}

2. 多行文本固定高度的居中

CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的"td"、"th"、"caption"等，而像"div"、"span"这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

但是在CSS中还有一个display属性能够模拟"table"，所以我们可以使用这个属性来让"div"模拟"table"就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个"div"元素。

我是第一行

我是第二行

我是第三行

我是第四行

#wrap {

height: 400px;

display: table;

}

#content {

vertical-align: middle;

display: table-cell;

border: 1px solid #FF0099;

background-color: #FFCCFF;

width: 760px;

}

2. 多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把完全填充的一种方式而已。

这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

我是第一行

我是第二行

我是第三行

我是第四行

div {

padding: 25px;

border: 1px solid #FF0099;

background-color: #FFCCFF;

width: 500px;

}

4. 多行文本固定高度的居中

现在我们要使这段文字垂直居中显示！

div#wrap {

display: table;

border: 1px solid #FF0099;

background-color: #FFCCFF;

width: 500px;

height: 400px;

_position: relative;

overflow: hidden;

}

div#subwrap {

vertical-align: middle;

display: table-cell;

_position: absolute;

_top: 50%;

}

div#content {

_position: relative;

_top: -50%;

}

html中div中文字如何上下居中,div中文字各种垂直居中的方法相关推荐

html文字竖直书写,css 文字竖直居中的写法和图片垂直居中代码(图文)
界面上文章左右居中使用text-aligin:center,上下竖直居中的写法如下, 图片垂直居中的代码文字.图片居中显示的方法 .content{ height: 40px; line-heigh ...
文字竖直居中 html,CSS 文字垂直居中
1.高度为百分比,line-height 不知道设置具体的数值的情况,利用伪元素进行居中 HTML 这是要居中的文字 CSS 给要居中元素设置一个伪元素 .son{ height: 50%; back ...
html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）
1.css实现居中缺点:需要提前知道元素的宽度和高度. Document .box{ width: 600px; height: 400px; position: absolute; left: 5 ...
html图片自适应上下左右居中显示,图片大小自适应垂直居中的方法
偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式: Javascript篇: 用JS的方 ...
[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
div中文字，图片居中对齐，兼容FF、IE
2010年07月21日星期三 20:11 垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用.假设你将一个导航菜单的高度设 ...
web前端字体居中_DIV中文字水准、垂直居中
DIV中文字水平.垂直居中实现Div层里的文字垂直居中的方法有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正 ...
HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两 ...
php 上下位置居中,CSS_css中position:fixed实现div在窗口上下左右居中，上下左右居中代码如下复制 - phpStudy...
css中position:fixed实现div在窗口上下左右居中上下左右居中代码如下复制代码代码如下: div{ position:fixed; margin:auto; left:0; ri ...
文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...

html中div中文字如何上下居中,div中文字各种垂直居中的方法

html中div中文字如何上下居中,div中文字各种垂直居中的方法相关推荐

最新文章

热门文章