如何使用css设置文字在网页中显示居中？

html-css026

如何使用css设置文字在网页中显示居中？,第1张

1、打开编辑器，新建test.html，用于学习今天的内容。

2、接下来需要在head标签下方引入jquery.min.js插件，如下图所示。

3、在页面的body标签里，新建一个div，名称为test。

4、在body标签下方写上<script></script>,用来存放js代码。通过class定位到div，通过css()方法让文字居中。

5、在浏览器中打开test.html，可以在文字在页面中间显示。

垂直居中问题

css

-----------------------------

虽然css有一个垂直居中属性，CSS垂直居中属性不能决绝如下问题:

存在的问题：

*

已知div高度

*

div动态内容，不确定高度

*

想要内容垂直居中

*

不用table

在IE下:

位于相对容器的一半高度.

div内容所占有的高度默认设置为div高度

在标准浏览器中如：Mozilla,

Opera,

Safari

等等是完全不同的.

div被当做一个table

被现实出来.

<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01//EN">

<html>

<head>

<title>Universal

vertical

center

with

CSS</title>

<style>

.greenBorder

{border:

1px

solid

green}

</style>

</head>

<body>

<div

class="greenBorder"

style="display:

table

height:

400px

#position:

relative

overflow:

hidden">

<div

style="

#position:

absolute

#top:

50%display:

table-cell

vertical-align:

middle">

<div

class="greenBorder"

style="

#position:

relative

#top:

-50%">

any

text<br>

any

height<br>

any

content,

for

example

generated

from

DB<br>

everything

is

vertically

centered

</div>

</div>

</div>

</body>

</html>

在浏览器中显示：

any

text

any

height

any

content,

for

example

generated

from

DB

everything

is

vertically

centered