web字体样式居中方法

Web期末笔记：字体样式 + 文字居中方法

一、常用字体样式属性

1. font-size：字号，单位px
   font-size: 16px;
2. color：文字颜色
   color: #333;
3. font-family：字体
   font-family: "微软雅黑",sans-serif;
4. font-weight：字体粗细

• bold 加粗

• normal 正常
font-weight: bold;
5. font-style：字体倾斜

• italic 斜体

• normal 正常
font-style: italic;
6. text-decoration：文字装饰

• none 无下划线（清除a标签下划线）

• underline 下划线
text-decoration: none;
7. text-align：水平对齐
left左对齐 / center居中 / right右对齐

二、文字居中三大方法（考试高频）

1. 单行文字水平+垂直居中（最常用，导航/按钮）
   .box {
   width: 200px;
   height: 50px;
   text-align: center; /* 水平居中 /
   line-height: 50px; / line-height = 盒子高度，垂直居中 */
   }
2. 多行文字仅水平居中

只用 text-align: center;，垂直靠内边距padding撑开。
.box {
width: 300px;
text-align: center;
padding: 20px;
}
3. 弹性盒子 flex 通用居中（单行/多行都适用）
.box {
width: 200px;
height: 100px;
display: flex;
justify-content: center; /* 水平居中 /
align-items: center; / 垂直居中 */
}
三、简答题背诵

1. 单行文字垂直居中怎么做？
   设置 line-height 等于容器高度。

2. flex实现文字居中核心代码？
   display:flex; justify-content:center; align-items:center;

3. text-align:center 作用？
   控制块级容器内部文字、行内元素水平居中。