CSS 笔记 - 文字居中变大

1
<!DOCTYPE html>
2
<html lang="zh-CN" >
3
  <head>
4
    <title>文章居中变大 - flex</title>
5
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6
  </head>
7
  <body>
8

9
<div class="box">
10
    <div class="box-one">Npcink</div>
11
    <div class="box-two">我是文字二</div>
12
</div>
13
<style>
14
    .box {
15
        overflow: hidden;
16
        padding: 20px;
17
        width: 500px;
18
        margin: 0 auto;
19
        border: 2px solid;
20
    }
21
    .box-one {
22
        float: left;
23
        border: 1px solid blue;
24
    }
25
    .box-two {
26
        float: right;
27
        border: 1px solid red;
28
    }
29
    /*我们先让Npcink变大*/
30
    .box-one {
31
        font-size: 50px;
32
    }
33
    /*居中的核心*/
34
    .box {
35
        display: flex;
36
        align-items: center;
37
    }
38
    .box-one {
39
        flex: 1;
40
    }
41
</style>
42

43

44
</body>
45
</html>

1
/*居中的核心*/
2
    .box {
3
        display: flex;
4
        align-items: center;
5
    }
6
    .box-one {
7
        flex: 1;
8
    }