<!DOCTYPE HTML>
<html>
<head>
<title>html文字居中測試</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div >html文字水平居中</div>
<div >html文字垂直居中</div>
<div >html文字水平上下居中</div>
</body>
</html>
擴充套件資料：
html自定義字型樣式
一般字型的設定包含：字型，字型大小，字型顏色
html設定字型的話有很多標籤去設定
h1,h2,h3,h4,h5,h6 標題
採用css屬性。用font去設定字型。
font-family 規定元素的字體系列。包含：宋體，微軟雅黑等這些字型之類的。font-family:Microsoft yahei 表示設定字型為微軟雅黑
font-weight是設定字型的粗細。包含：lighter（更細），normal（正常），bold（粗體），bolder（更粗）font-weight:bold設定字型為粗體
font-size 是字型的尺寸，可以用使用百分比去設定或者畫素去設定。如:font-size:18px
color屬性是設定字型的顏色。可以採用
color:red; (顏色名稱)color:#00ff00; （顏色的十六進位制）color:rgb(0,0,255);（顏色的rgb）例子：<style type="text/css">
.title{font-family:Microsoft yahei;font-size:16px;font-weight:bold;color:#ccc}</style>我是標題
<!DOCTYPE HTML>
<html>
<head>
<title>html文字居中測試</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div >html文字水平居中</div>
<div >html文字垂直居中</div>
<div >html文字水平上下居中</div>
</body>
</html>
擴充套件資料：
html自定義字型樣式
一般字型的設定包含：字型，字型大小，字型顏色
html設定字型的話有很多標籤去設定
h1,h2,h3,h4,h5,h6 標題
採用css屬性。用font去設定字型。
font-family 規定元素的字體系列。包含：宋體，微軟雅黑等這些字型之類的。font-family:Microsoft yahei 表示設定字型為微軟雅黑
font-weight是設定字型的粗細。包含：lighter（更細），normal（正常），bold（粗體），bolder（更粗）font-weight:bold設定字型為粗體
font-size 是字型的尺寸，可以用使用百分比去設定或者畫素去設定。如:font-size:18px
color屬性是設定字型的顏色。可以採用
color:red; (顏色名稱)color:#00ff00; （顏色的十六進位制）color:rgb(0,0,255);（顏色的rgb）例子：<style type="text/css">
.title{font-family:Microsoft yahei;font-size:16px;font-weight:bold;color:#ccc}</style>我是標題