CSS 置中方式

發表於 更新於
文章字數： 1.5k 所需閱讀時間 ≈ 3 分鐘

CSS 置中方式

  • demo heml
    1
    2
    3
    4
    5
    <div class="container">
        <div class="content">
            content
        </div>
    </div>

水平置中

block + margin

1
2
3
4
5
6
7
8
9
10
11
12
.container {
    border: 1px solid black;
}

.content {
   display: block; // default
   width: 200px;
   height: 200px;
   background-color: lightblue;
   
   margin: 0 auto;
}

inline-block + text-align

1
2
3
4
5
6
7
8
9
10
11
12
.container {
    border: 1px solid black;
    text-align: center;
}

.content {
   display: inline-block;
   width: 200px;
   height: 200px;
   background-color: lightblue;
   margin: 0 auto;
}

垂直置中

height = line-height

1
2
3
4
5
.content {
   height: 200px;
   background-color: lightblue;
   line-height: 200px;
}

relative and absolute position + margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
    border: 1px solid black;
    height: 400px;

    position: relative;
}

.content {
    position: absolute;

    width: 200px;
    height: 200px;
    background-color: lightblue;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
}

relative and absolute position + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container {
    border: 1px solid black;
    height: 400px;

    position: relative;
}

.content {
    position: absolute;

    width: 200px;
    height: 200px;
    background-color: lightblue;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

flex

1
2
3
4
5
6
7
8
9
.container {
    border: 1px solid black;
    height: 400px;

    display: flex;
    justify-content: center;
    align-items:center;
}

table

1
2
3
4
5
6
7
<table>
    <tr>
        <td class="content">
            content
        </td>
    </tr>
</table>
1
2
3
4
.content {
    text-align: center;
    vertical-align: middle;
}