<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width:400px;
height: 300px;
/*background-color: red;*/
border: 1px solid red;
font-size: 20px;/*设置字体大小 px为像素 rem em %用在盒子不写宽度继承了父盒子，这三个主要用在移动端； 默认的字体大小是16px */
font-weight: 700; /*字体粗细，默认normal;bold加粗；bolder更加粗；lighter很细；默认数值是400；*/
font-style:oblique; /*推荐设置斜体的时候用oblique，italic，normal*/
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
text-align: center; /*文本水平居中* justify两端对齐（只对英文有效）；默认是左对齐，right是右对齐； */
text-shadow:0px 0px 1px #fff; /*设置阴影效果*/
text-decoration: none; /*默认是none没有下划线；underline下划线、underline blue； 主要用于清除a标签的默认样式（下划线）*/
color: blue; /*字体颜色*/
cursor: pointer; /*光标，小手状态；*/
/*line-height: 300px;行高，它的高度等于height的高度，垂直水平居中。*/
/*1em = 20px*/
/*设置首字缩进 单位：em为准*/
text-indent: 2em;
}
</style>
</head>
<body>
<div>
转过肩膀，深情地向过去的人生第一幕说再见。接着，迅速转过头来向前看。
你的第二幕就从今天开始，轮到你伸出手去接住人生的接力棒。
</div>
</body>
</html>
单行文本垂直居中
行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本（就是只有一行的内容）
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8 div{
9 width: 300px;
10 height: 50px;
11 border: 1px solid red;
12 /*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本（就是只有一行的内容）*/
13 line-height: 50px; /*垂直居中，是相当于line-height，而不是相对height的；*/
14 font-size: 18px;
15
16 }
17 </style>
18 </head>
19 <body>
20
21 <div>
22 内容国家
23 </div>
24
25 </body>
26 </html>
View Code