HTML编程之实现文字水平居中

最新推荐文章于 2024-06-18 19:41:46 发布

ALEX__0805

最新推荐文章于 2024-06-18 19:41:46 发布

阅读量2.9k

点赞数 1

分类专栏：汇编语言 html5 文章标签： html 编程

html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

汇编语言

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="cache-control" content="no-cache" /> 
<style> 
<!-- 
html, body { 
height: 100%; 
margin: 0; 
padding: 0; 
} 
body { 
position: relative; 
} 
#div { 
background: blue; 
color: #fff; 
position: absolute; 
top: 50%; 
left: 50%; 
height: 240px; 
width: 240px; 
margin: -120px 0 0 -120px; 
} 
--></style> 
</head> 
<body> 
<div id="div"> 
i'm Mr. Middle. 
</div> 
</body> 
</html>

方法二

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="cache-control" content="no-cache" /> 
<style> 
<!-- 
html, body { 
height: 100%; 
margin: 0 auto; 
padding: 0; 
} 
body { 
position: relative; 
display: table; 
} 
#wrapper { 
display: table-cell; 
vertical-align: middle; 
text-align: middle; 
} 
#div { 
background: blue; 
color: #fff; 
} 
* html #wrapper, *+html #wrapper { 
position: absolute; 
top: 50%; 
} 
* html #div, *+html #div { 
position: relative; 
top: -50%; 
} 
--></style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="div"> 
i'm Mr. Middle. 

i'm Mr. Middle. 

i'm Mr. Middle. 

</div> 
</div> 
</body> 
</html>