CSS垂直置中/水平置中（持續新增）

超級重要但永遠記不住的CSS置中方式！

Molly M

15 min readOct 4, 2021

說明

看到一個紀錄一個，持續更新，分為文字/區塊，在細分為垂直或水平。

懶的看的話可以直接跳到重點 —

水平垂直置中 flex
水平垂直置中 margin+position

文字

水平置中

包住文字的容器(以下通稱父容器) 給他 text-align: center

.textBox{
    text-align: center;
}
...
<div className="textBox">
    <p>文字</p>
</div>

2. table + margin (用於父級元素寬度不固定，子級元素寬度也不固定)

.parent {
}.child {
    display: table;
    margin: 0 auto;
}...<div className="parent">
     <div className="child">DEMO</div>
</div>

3. absolute + transform

.parent {
}.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}...<div className="parent">
     <div className="child">DEMO</div>
</div>

4. flex + justify-content

.parent {
    display: flex;
    justify-content: center;
}.child {
}...<div className="parent">
     <div className="child">DEMO</div>
</div>

5. flex + margin

.parent {
    display: flex;
}.child {
    margin: 0 auto;
}...<div className="parent">
     <div className="child">DEMO</div>
</div>

垂直置中

父容器設定高度後給定line-height （常用於選單文字垂直置中）

.textBox {
    background-color: #c7ff91;
    width: 300px;
    height: 100px;
    line-height: 100px;
}
...<div className="textBox">
    <p>文字</p>
</div>

補充多行文字的垂直置中

.box {
    width: 500px;
    border: 1px solid #f00;
    margin: auto;
    line-height: 200px;
    text-align: center;
}.content {
    display: inline-block;
    height: auto;
    line-height: 1;
    width: 400px;
    background: #ccc;
    vertical-align: middle;
}...
<div className="box">
    <div className="content">
       <p>aaaaa</p>
       <p>aaaaa</p>
       <p>aaaaa</p>
    </div>
</div>

區塊

水平置中

flex

.container {
    display: flex;
    justify-content: center;
    border: 2px solid black;
    height: 50vh;
}.box {
    width: 100px;
    height: 100px;
    border: 2px solid rgb(255, 0, 0);
}...
<div className="container">
  <div className="box">
  </div>
</div>

垂直置中

flex

兩個重要屬性 align-content: center ; flex-wrap: wrap;

.container {
    display: flex;
    border: 2px solid black;
    height: 50vh;
    align-content: center;
    flex-wrap: wrap;}
.box {
    width: 100px;
    height: 100px;
    border: 2px solid rgb(255, 0, 0);
}
...
<div className="container">
  <div className="box">
  </div>
</div>

（flex真好用）

1.2 Flex + align-items (優點是此層不需設定高度即可自動置中)

.container {
    width: 500px;
    height: 250px;
    border: 1px solid #f00;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 400px;
    background: #ccc;
}
...
<div className="container">
     <div className="box">
          <a href="aa">hello</a>
          <p>aaaaaa</p>
     </div>
</div>

1.3 Flex + margin

.container {
    width: 500px;
    height: 250px;
    border: 1px solid #f00;
    margin: auto;
    display: flex;
}
.box {
    width: 400px;
    background: #ccc;
    margin: auto;
}...<div className="container">
     <div className="box">
          <a href="aa">hello</a>
          <p>aaaaaa</p>
     </div>
</div>

2. margin (tips:給定寬度後margin: 0 auto)（常用適用於RWD）

.box {
    height: 100px;
    border: 2px solid rgb(255, 0, 0);
    width: 200px;
    margin: 0 auto;
}
...
<div className="box">text</div>

<div className="box">
     <img src="http://placehold.it/100/100" alt="" />
</div>

3. padding （給寬度後用padding推推）

.container {
    border: 2px solid rgb(255, 0, 0);
    padding: 4em 0;
    width: 500px;
    text-align: center;
}
...<div className="container">
     <p>asdasdasaaaa</p>
</div>

4. position （絕對位置後要用margin調整回中間）（寬高的1/2）

.container {
    border: 2px solid rgb(255, 0, 0);
    text-align: center;
    width: 400px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -200px;
}...<div className="container">
    <p>aaaaaaaaaaaaaa</p>
</div>

5. transform

-範例1

.container {
    height: 100vh;
}.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #000;
}
...<div className="container">
     <div className="box">
          <p>bbbbbbbbbbbbbbb</p>
     </div>
</div>

-範例2 （父元件position :relative;子元件position: absolute;）

.container {
    width: 500px;
    height: 250px;
    border: 1px solid #f00;
    margin: auto;
    position: relative;
}
.box {
    width: 400px;
    background: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}...<div className="container">
     <div className="box">
          <a href="aa">hello</a>
          <p>aaaaaa</p>
     </div>
</div>

5. calc

.container {
    width: 500px;
    height: 250px;
    border: 1px solid #f00;
    margin: auto;
}
.box {
    width: 400px;
    background: #ccc;
    position: relative;
    top: calc((100% - 70px) / 2);
    margin: auto;
    height: 70px;
}...<div className="container">
     <div className="box">
          <a href="aa">hello</a>
          <p>aaaaaa</p>
     </div>
</div>

6. 相對定位 Relative + translateY

.container {
    width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.box {
    width: 400px;
    background: #ccc;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
}...<div className="container">
     <div className="box">
          <a href="aa">hello</a>
          <p>aaaaaa</p>
     </div>
</div>

7. ::before + inline-block

.container {
    width: 500px;
    height: 250px;
    border: 1px solid #f00;
    margin: auto;
    text-align: center;
}
.container::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.box {
    width: 400px;
    background: #ccc;
    display: inline-block;
    vertical-align: middle;
}...<div className="container">
     <div className="box">
          <a href="aa">hello</a>
          <p>aaaaaa</p>
     </div>
</div>

8. 圖案是圓形的範例 (父層給display:flex 子:margin:auto)

.container {
    width: 600px;
    height: 300px;
    border: 1px solid #f00;
    /* margin: auto; */
    display: flex;
}.box {
    width: 100px;
    height: 100px;
    border: 6px solid rgb(128, 100, 100);
    border-radius: 50%;
    margin: auto;
}...<div className="container">
     <div className="box">     </div>
</div>

結合水平垂直置中

position + transform

.parent {
    position: relative;
}.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}...<div className="parent">
     <div className="child">DEMO</div>
</div>

2. flex

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}.child {
}...<div className="parent">
     <div className="child">DEMO</div>
</div>

flex

3. margin + position

.parent {
    position: relative;
    border: 1px green solid;
    width: 600px;
    height: 600px;
}.child {
    position: absolute;
    border: 1px red solid;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;/* text-align: center;
   line-height: 300px;  文字(demo)要置中就加這兩條
*/
}...<div className="parent">
     <div className="child">DEMO</div>
</div>

水平+垂直置中的三種方法

ans: 
一. display: flex;
   align-items: center;
   justify-content: center;
  
二. text-align: center;
    line-height: height / 2三. parent {
       display: flex;
    }
   child {
       margin: auto;
   }

*水平垂直置中

transform 該方法可以不定寬高

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. 該方法必須盒子有寬高

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

3. 該方法必須盒子有寬高

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

4. flex

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

完成 ٩(ˊᗜˋ )و

CSS垂直置中/水平置中（持續新增）

超級重要但永遠記不住的CSS置中方式！

說明

文字

區塊

結合 水平垂直置中

Written by Molly M

結合水平垂直置中