CSS Cheat Sheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="container-doidev">
    <p class="class-doidev">Đời Dev chém gió</p>
</div>

<style>
    .container-doidev {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
    }
    .class-doidev {
        text-align: center;
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div class="container-doidev-1">
    <div class="class-doidev-1"></div>
</div>

<style>
    .container-doidev-1 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
    }
    .class-doidev-1 {
      width: 50px;
      height: 50px;
      background:orange;
      margin: 0 auto;
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div class="container-doidev-2">
    <div class="class-doidev-2"></div>
</div>

<style>
    .container-doidev-2 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
      display:flex;
      justify-content:center;
    }
    .class-doidev-2 {
      width: 50px;
      height: 50px;
      background:purple;
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<div class="container-doidev-3">
    <div class="class-doidev-3"></div>
</div>

<style>
    .container-doidev-3 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
      position: relative;
    }
    .class-doidev-3 {
      width: 50px;
      height: 50px;
      background:red;
      /* canh giữa theo chiều dọc*/
      position: absolute;
      top:50%;
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="container-doidev-4">
    <div class="class-doidev-4"></div>
</div>

<style>
    .container-doidev-4 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
      position: relative;
    }
    .class-doidev-4 {
      width: 50px;
      height: 50px;
      background:red;
      /* canh giữa theo chiều dọc*/
      position: absolute;
      top:50%;
      margin-top:-25px;
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="container-doidev-5">
    <div class="class-doidev-5"></div>
</div>

<style>
    .container-doidev-5 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
      position: relative;
    }
    .class-doidev-5 {
      width: 50px;
      height: 50px;
      background:red;
      /* canh giữa theo chiều dọc*/
      position: absolute;
      top:50%;
      transform:translateY(-50%)
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<div class="container-doidev-6">
    <div class="class-doidev-6"></div>
</div>

<style>
    .container-doidev-6 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
      display:flex;
      align-items:center;
    }
    .class-doidev-6 {
      width: 50px;
      height: 50px;
      background:cyan;

    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="container-doidev-7">
    <div class="class-doidev-7"></div>
</div>

<style>
    .container-doidev-7 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
      position:relative;
    }
    .class-doidev-7 {
      width: 50px;
      height: 50px;
      background:green;
      /* Canh giữa hai chiều ngang dọc */
      position:absolute;
      top:50%;
      left:50%;
      margin:-25px 0 0 -25px;
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="container-doidev-8">
    <div class="class-doidev-8"></div>
</div>

<style>
    .container-doidev-8 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
      position:relative;
    }
    .class-doidev-8 {
      width: 50px;
      height: 50px;
      background:blue;
      /* Canh giữa hai chiều ngang dọc */
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%)
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<div class="container-doidev-9">
    <div class="class-doidev-9"></div>
</div>

<style>
    .container-doidev-9 {
      width:300px;
      height: 200px;
      border: 2px dashed pink;
      /* Canh giữa hai chiều ngang dọc */
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .class-doidev-9 {
      width: 50px;
      height: 50px;
      background:yellow;
    }
</style>