By

Contents
  1. 1. Basics
    1. 1.1. Types of Boxes
  2. 2. Height and Width
    1. 2.1. Width
    2. 2.2. Height
  3. 3. Align
    1. 3.1. Horizontal Align
      1. 3.1.1. Horizontally center a div
        1. 3.1.1.1. Horizontally center a div using margin auto
        2. 3.1.1.2. Horizontally center a div using flexbox in the container
        3. 3.1.1.3. Horizontally center a div using transform
      2. 3.1.2. Horizontally Center Text
        1. 3.1.2.1. Horizontally center text using text align
        2. 3.1.2.2. Horizontally center text using flex
      3. 3.1.3. Align a div to right
        1. 3.1.3.1. Align a div to right using position
        2. 3.1.3.2. Align a div to right using float
      4. 3.1.4. Align div to left and right
        1. 3.1.4.1. Align a div to left and right using float
    2. 3.2. Vertical Align
      1. 3.2.1. Vertically center a div
        1. 3.2.1.1. Vertically center a div using flexbox in the container
        2. 3.2.1.2. Vertically center a div using transform
      2. 3.2.2. Vertically center text
        1. 3.2.2.1. Vertically center text using line height
        2. 3.2.2.2. Vertically center text using vertical-align + table-cell
        3. 3.2.2.3. Vertically center text using padding
        4. 3.2.2.4. Vertically center text using flex
        5. 3.2.2.5. Vertically center text by center a inner div vertically
    3. 3.3. Horizontal and vertical Align
      1. 3.3.1. Horizontally and vertically center a div
        1. 3.3.1.1. Using flex
        2. 3.3.1.2. Using transform
      2. 3.3.2. Horizontally and vertically center text
        1. 3.3.2.1. Using flex
  4. 4. Layout
    1. 4.1. Multiple div in one line
    2. 4.2. Dynamic Layout
  5. 5. Break Word
  6. 6. Common CSS
    1. 6.1. first-of-type and first-child
  7. 7. Classic Layout
  8. 8. Common class name
  9. 9. References

Basics

Types of Boxes

CSS display types (types of boxes):

  • block
  • inline
  • inline-block.
New Line Horizontal Space Actual Width Height Margin Padding
Block elements Always starts on a new line Always occupy the entire horizontal space. 100% by default. You can specify width. Height of content by default. Can specify height. OK OK
Inline elements Don’t start on a new line Width of content. width of content by default. Can’t specify width. Height of content by default. Can’t specify height. Horizontal margin is OK. But vertical margin don’t work. Horizontal padding is OK. But vertical padding don’t occupy space just overlay.
Inline-Block elements Don’t start on a new line Width of content by default. Or specified width. width of content by default. You can specify width. Same with “Block elements” Same with “Block elements” Same with “Block elements”

Height and Width

Width

  • 宽度一般不设置，用内容本身去撑（动态宽度）。也可以设置固定的宽度，使用百分比宽度。
  • 用 padding/margin left/right 百分比，去设置两个元素之间的水平间距。

Height

  • 高度一般也不设置，用内容本身撑（动态高度）。
  • 使用 padding/margin top/bottom 固定值，去增加高度。

Align

Horizontal Align

Horizontally center a div

Horizontally center a div using margin auto
1
margin: auto;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
            }
            #innerDiv {
                background-color: green;
                width: 200px;
                height: 200px;
                margin: auto;
                margin-top: 40px;
                margin-bottom: 40px;
            }
        </style>
    </head>
    <body>
    	<div>123</div>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
        <div>123</div>
    </body>
</html>
Horizontally center a div using flexbox in the container
1
2
3
display:flex;
flex-direction:row; /* by default */
justify-content:center;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
                display:flex;
                flex-direction:row; /* by default */
                justify-content:center;

            }
            #innerDiv {
                background-color: blue;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>
Horizontally center a div using transform
1
2
/* container */
position: relative;
1
2
3
4
/* inner div */
position: absolute;  
left: 50%;
transform: translate(-50%, 0); /* or transform: translateX(-50%);*/
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #container {
                position: relative;
                height: 400px;
                background-color: lightgray;
            }

            #centeredDiv {
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                height: 200px;
                width: 200px;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="centeredDiv">
                Content
            </div>
        </div>
    </body>
</html>

Horizontally Center Text

Horizontally center text using text align
1
text-align: center;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #myDiv {
                background-color: green;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">Content</div>
    </body>
</html>
Horizontally center text using flex
1
2
3
display:flex;
flex-direction:row; /* by default */
justify-content:center;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #myDiv {
                background-color: green;
                height: 200px;
                display:flex;
                flex-direction:row; /* by default */
                justify-content:center;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">Content</div>
    </body>
</html>

Align a div to right

Align a div to right using position
1
2
position: absolute;
right: 0px;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
                position: absolute;
                right: 0px;
            }
            #innerDiv {
                background-color: blue;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>
Align a div to right using float
1
float: right;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
            }
            #innerDiv {
                background-color: green;
                width: 200px;
                height: 200px;
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>

Align div to left and right

Align a div to left and right using float
1
2
3
4
5
6
<div class="container">
    <div class="left-item"></div>
    <div class="left-item"></div>
    <div class="right-item"></div>
    <div class="right-item"></div>
</div>
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .container {
                height: 100px;
                background-color: gray;
                /* fixing overflow outside by adding scroll bar*/
                overflow: auto; 
            }
            .container .left-item {
                background-color: green;
                width: 20%;
                height: 200px;
                float: left;
                margin-right: 10px;
            }
            .container .right-item {
                background-color: blue;
                width: 20%;
                height: 200px;
                float: right;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left-item">1</div>
            <div class="left-item">2</div>
            <div class="right-item">3</div>
            <div class="right-item">4</div>
        </div>
    </body>
</html>

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the “clearfix“ hack to fix this. We can add overflow: auto; to the containing element to fix this problem

Vertical Align

Vertically center a div

Vertically center a div using flexbox in the container

Method 1: using align-items: center

align-items: the direction is across with flex-direction.

1
2
3
display:flex;
flex-direction:row; /* by default*/
align-items:center;

Method 2: using justify-content: center

justify-content: the direction is the same with flex-direction.

1
2
3
display:flex;
flex-direction:column;
justify-content:center;

flex-direction：

  • row (by default, from left to right)
  • row-reverse
  • column (from top to bottom)
  • column-reverse
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
                background-color: darkgray;
                height: 300px;
                display:flex;
                flex-direction:row; /* by default */
                align-items:center;
            }
            #outerDiv2 {
                background-color: lightgray;
                height: 300px;
                display:flex;
                flex-direction:column;
                justify-content:center;
            }
            #innerDiv {
                background-color: green;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
        <div id="outerDiv2">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>
Vertically center a div using transform
1
2
/* container */
position: relative;
1
2
3
4
/* inner div */
position: absolute;  
top: 50%;
transform: translate(0, -50%); /* or transform: translateY(-50%);*/
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #container {
                position: relative;
                height: 400px;
                background-color: lightgray;
            }

            #centeredDiv {
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                height: 200px;
                width: 200px;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="centeredDiv">
                Content
            </div>
        </div>
    </body>
</html>

Vertically center text

Vertically center text using line height

Only center a single line text vertically 

1
2
height: 150px;
line-height: 150px;
Details 
1
2
3
4
5
6
7
8
9
10
<style type="text/css">
    #myDiv {
        background-color: green;
        width: 200px;
        height: 150px;
        line-height: 150px;
    }
</style>

<div id="myDiv">Content</div>
Vertically center text using vertical-align + table-cell

Center multiple lines text vertically

1
2
3
4
#innerDiv {
    display:table-cell;
    vertical-align:middle;
}
Details 
1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
    #myDiv {
        background-color: green;
        height:400px;
        width:150px;
        display:table-cell;
        vertical-align:middle;
    }
</style>

<div id="myDiv">this is multiple lines. this is multiple lines. this is multiple lines. this is multiple lines. this is multiple lines. this is multiple lines. this is multiple lines. </div>
Vertically center text using padding

Using padding in no height a div.

1
2
padding-top: 50px;
padding-bottom: 50px;
Details 
1
2
3
4
5
6
7
8
9
10
<style type="text/css">
    #myDiv {
        background-color: green;
        width: 200px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
</style>

<div id="myDiv">Content</div>
Vertically center text using flex
1
2
3
display:flex;
flex-direction:row; /* by default */
align-items:center;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    #myDiv {
        background-color: blue;
        width: 200px;
        height: 200px;
        display:flex;
        flex-direction:row; /* by default */
        align-items:center;
    }
</style>

<div id="myDiv">Content</div>
Vertically center text by center a inner div vertically

Horizontal and vertical Align

Horizontally and vertically center a div

Using flex
1
2
3
4
display:flex;
flex-direction:row; /* by default */
justify-content:center;
align-items: center;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #outerDiv {
            	height: 500px;
                background-color: darkgray;
                display:flex;
                flex-direction:row; /* by default */
                justify-content:center;
                align-items: center;
            }
            #innerDiv {
                background-color: blue;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">Content</div>
        </div>
    </body>
</html>
Using transform
1
2
/* container */
position: relative;
1
2
3
4
5
/* inner div */
position: absolute;  
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #container {
                position: relative;
                height: 400px;
                background-color: lightgray;
            }

            #centeredDiv {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                height: 200px;
                width: 200px;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="centeredDiv">
                Content
            </div>
        </div>
    </body>
</html>

Horizontally and vertically center text

Using flex
1
2
3
4
display:flex;
flex-direction:row; /* by default */
justify-content:center;
align-items: center;
Details 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #myDiv {
                background-color: green;
                height: 200px;
                display:flex;
                flex-direction:row; /* by default */
                justify-content:center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">Content</div>
    </body>
</html>

Layout

Multiple div in one line

1
float:left (or right);
1
display:inline-block;
1
display:flex;

Dynamic Layout

Inline elements in a block element auto wrapping lines until decrease to the block minimal width:

1
min-width: {fixed_value}

Break Word

  • word-break: normal; // newline for words
  • word-break: break-all; // newline for characters
  • word-break: keep-all; // don’t newline
  • word-break: break-word; // newline for words, if a single word over the block width then newline for character. Deprecated. Using word-break: normal and overflow-wrap: anywhere replace word-break: break-word.

Common CSS

first-of-type and first-child

  • xxx:first-of-type: match the first of selector occur from a parent.
  • xxx:nth-of-type(1)
  • xxx:last-of-type
  • xxx:nth-last-of-type(1)
  • xxx:first-child : match when the first of child of a parent is the selector.
  • xxx:nth-child(1)
1
2
3
4
5
6
7
8
9
10
11
<div class="column">
    <div class="row">I am .row:first-of-child.</div> 
    <div class="row">this is a lines. </div>
    <div class="row">this is a lines. </div>
</div>
<div class="column">
    <p>I am p:first-of-child</p>    
    <div class="row">I am .row:first-of-type not .row:first-of-child.</div>
    <div class="row">this is a lines. </div>
    <div class="row">this is a lines. </div>
</div>

Classic Layout

Multiple columns align left using display: flex;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">
    #content {
        display: flex;
        flex-direction: row;
    }
    .column {
        background-color: darkgray;
        padding: 20px 20px 20px 0px;
    }
    .column:first-of-type {
        padding-left: 20px
    }
    .row {
        background-color: green;
        height: 30px;
        margin-top: 10px;
    }
    .row:first-of-type {
        margin-top: 0px;
        font-weight: bold;
    }
</style>

<div id="content">
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
</div>

Multiple columns align left and one column align right using display: flex; and margin-left: auto;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style type="text/css">
    #content {
        background-color: darkgray;
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .column {
        background-color: orange;
        padding: 20px 20px 20px 0px;
    }
    .column:first-of-type {
        padding-left: 20px
    }
    .column:nth-last-of-type(1)  {
        background-color: red;
        margin-left: auto;
    }
    .row {
        background-color: green;
        height: 30px;
        margin-top: 10px;
    }
    .row:first-of-type {
        margin-top: 0px;
        font-weight: bold;
    }
</style>

<div id="content">
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
    <div class="column">
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
        <div class="row">this is multiple lines. </div>
    </div>
</div>

columns have two directions, some from align left, others align right, using flex-direction: row and flex-direction: row-reverse;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<style type="text/css">
    #content {
        background-color: darkgray;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    #section1 {
        display: flex;
        flex-direction: row;
    }
    #section2 {
        display: flex;
        flex-direction: row-reverse;
    }
    .column {
        background-color: orange;
        padding: 20px 20px 20px 0px;
    }
    .column:first-of-type {
        padding-left: 20px
    }
    .column:nth-last-of-type(1)  {
        background-color: red;
    }
    .row {
        background-color: green;
        height: 30px;
        margin-top: 10px;
    }
    .row:first-of-type {
        margin-top: 0px;
        font-weight: bold;
    }
</style>

<div id="content">
    <div id="section1">
        <div class="column">
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
        </div>
        <div class="column">
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
        </div>
    </div>
    <div id="section2">
        <div class="column">
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
        </div>
        <div class="column">
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
            <div class="row">this is multiple lines. </div>
        </div>
    </div>
</div>

Common class name

  • row
  • column
  • title
  • content
  • item
  • wrapper
  • menu-bar
  • top, header, footer
  • logo

References

[1] CSS display properties: block, inline, and inline-block — & how to tell the difference

[2] CSS Layout - Horizontal & Vertical Align - w3schools

[3] Aligning Items in a Flex Container

Contents
  1. 1. Basics
    1. 1.1. Types of Boxes
  2. 2. Height and Width
    1. 2.1. Width
    2. 2.2. Height
  3. 3. Align
    1. 3.1. Horizontal Align
      1. 3.1.1. Horizontally center a div
        1. 3.1.1.1. Horizontally center a div using margin auto
        2. 3.1.1.2. Horizontally center a div using flexbox in the container
        3. 3.1.1.3. Horizontally center a div using transform
      2. 3.1.2. Horizontally Center Text
        1. 3.1.2.1. Horizontally center text using text align
        2. 3.1.2.2. Horizontally center text using flex
      3. 3.1.3. Align a div to right
        1. 3.1.3.1. Align a div to right using position
        2. 3.1.3.2. Align a div to right using float
      4. 3.1.4. Align div to left and right
        1. 3.1.4.1. Align a div to left and right using float
    2. 3.2. Vertical Align
      1. 3.2.1. Vertically center a div
        1. 3.2.1.1. Vertically center a div using flexbox in the container
        2. 3.2.1.2. Vertically center a div using transform
      2. 3.2.2. Vertically center text
        1. 3.2.2.1. Vertically center text using line height
        2. 3.2.2.2. Vertically center text using vertical-align + table-cell
        3. 3.2.2.3. Vertically center text using padding
        4. 3.2.2.4. Vertically center text using flex
        5. 3.2.2.5. Vertically center text by center a inner div vertically
    3. 3.3. Horizontal and vertical Align
      1. 3.3.1. Horizontally and vertically center a div
        1. 3.3.1.1. Using flex
        2. 3.3.1.2. Using transform
      2. 3.3.2. Horizontally and vertically center text
        1. 3.3.2.1. Using flex
  4. 4. Layout
    1. 4.1. Multiple div in one line
    2. 4.2. Dynamic Layout
  5. 5. Break Word
  6. 6. Common CSS
    1. 6.1. first-of-type and first-child
  7. 7. Classic Layout
  8. 8. Common class name
  9. 9. References