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