一、水平

1.內聯元素

塊級別的父元素中水平放置內聯元素，只需在父元素設定 text-align: center

<!-- HTML程式碼 -->
<div>
  <span>
    this is a paragraph.
  </span>
</div>

<!-- CSS -->
div {
    text-align: center;
}

這將適用於內聯，內聯塊，內聯表，內聯flex等。

2.塊級元素

(1)單個塊元素

div {
 margin: 0 auto;
}
 

(2)多個塊元素

給子元素設定 display : inline-block
父元素設定 text-align : center

<!-- HTML -->
<div class="inline-block-center">
    <div>
        I'm an element.
    </div>
    <div>
        I'm an element. 
    </div>
</div>

<!-- CSS -->
.inline-block-center {
    text-align: center;
}
.inline-block-center div {
    display: inline-block;
}
 

<!-- HTML程式碼 -->
<div class="flex-center">
    <div>
        I'm an element.
    </div>
    <div>
    I'm an element.
    </div>
</div>

<!-- CSS程式碼 -->
.flex-center {
    display: flex;
    justify-content: center;
}

二、垂直

1.內聯元素

(1)單行文字

設定父元素 line-height = height

<!-- HTML -->
<div class="inline-block-center">
    <span>
        this is a paragraph. <br>
    </span>
</div>

<!-- CSS -->
.inline-block-center {
    height:180px;
    line-height:180px;
}

(2)多行文字

需要已知父元素寬高

<!-- HTML 程式碼 -->
<div class="center-table">
      <p>I'm vertically centered multiple lines of text.</p>
</div>

<!-- CSS 程式碼 -->
.center-table {
    display: table;
    height: 250px;
}
.center-table p {
    display: table-cell;
    vertical-align: middle;
}

<!-- HTML 程式碼 -->
<div class="flex-center">
    <p>
        Text Content<br>
        Text Content<br>
        Text Content<br>
    </p>
</div>

<!-- CSS程式碼 -->
.flex-center {
    display:flex;
    align-items:center;
    height: 200px;
}

<!-- HTML 程式碼 -->
<div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox 
  container.</p>
</div>

<!-- CSS 程式碼 -->
.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200px;
}

2.塊級元素

<!-- HTML 程式碼 -->
<div class="parent">
    <div class="child">
        I'm a block-level element with a fixed height, centered 
        vertically within my parent.
    </div>
</div>

<!-- CSS 程式碼 -->
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 設定為當前塊height的一半 */
}

<!-- HTML 程式碼 -->
<div class="parent">
    <div class="child">

    </div>
</div>

<!-- CSS 程式碼 -->
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

<div class="parent">
    <div class="child">

    </div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

三、水平及垂直

<!-- HTML 程式碼 -->
<div class="parent">
    <div>
        <child></child>
    </div>
</div>

<!-- CSS 程式碼 -->
.parent {
    position: relative;
}

.child {
    width: 300px;
    height: 100px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -50px 0 0 -150px;
}

<!-- HTML 程式碼 -->
<div class="parent">
    <div class="child">

    </div>
</div>

<!-- CSS 程式碼 -->
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!-- HTML 程式碼 -->
<div class="parent">
    <div class="child">

    </div>
</div>

<!-- CSS 程式碼 -->
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!-- HTML 程式碼 -->
<span>
  I'm centered!
</span>

<!-- CSS 程式碼 -->
body, html {
    height: 100%;
    display: grid;
}
span {
    margin: auto;
}