如何使元素水平和垂直居中

Question

我試圖將標簽內容垂直居中，但是當我添加 CSS 樣式display:inline-flex時，水平文本對齊消失了。

如何為每個選項卡設置文本對齊 x 和 y？

 * { box-sizing: border-box; } #leftFrame { background-color: green; position: absolute; left: 0; right: 60%; top: 0; bottom: 0; } #leftFrame #tabs { background-color: red; position: absolute; top: 0; left: 0; right: 0; height: 25%; } #leftFrame #tabs div { border: 2px solid black; position: static; float: left; width: 50%; height: 100%; text-align: center; display: inline-flex; align-items: center; }

 <div id=leftFrame> <div id=tabs> <div>first</div> <div>second</div> </div> </div>

Answer 1

• 方法 1 - transform translateX / translateY ：

  此處示例/全屏示例

  在支持的瀏覽器（大多數）中，您可以使用top: 50% / left: 50%結合translateX(-50%) translateY(-50%)來動態地垂直/水平居中元素。

 .container { position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

 <div class="container"> <span>I'm vertically/horizontally centered!</span> </div>

---

• 方法 2 - Flexbox 方法：

  此處示例/全屏示例

  在支持的瀏覽器中，將目標元素的display設置為flex並使用align-items: center垂直居中和justify-content: center水平居中。 只是不要忘記添加供應商前綴以獲得額外的瀏覽器支持（參見示例）。

 html, body, .container { height: 100%; } .container { display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-content: center; }

 <div class="container"> <span>I'm vertically/horizontally centered!</span> </div>

---

• 方法 3 - table-cell / vertical-align: middle ：

  此處示例/全屏示例

  在某些情況下，您需要確保將html / body元素的高度設置為100% 。

  對於垂直對齊，將父元素的width / height設置為100%並添加display: table 。 然后對於子元素，將display更改為table-cell並添加vertical-align: middle 。

  對於水平居中，您可以添加text-align: center以使文本和任何其他inline子元素居中。 或者，您可以使用margin: 0 auto ，假設元素是block級的。

 html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }

 <section class="parent"> <div class="child">I'm vertically/horizontally centered!</div> </section>

---

• 方法 4 - 從頂部絕對定位50% ，有位移：

  此處示例/全屏示例

  這種方法假定文本具有已知的高度 - 在本例中為18px 。 相對於父元素，將元素從頂部絕對定位50% 。 使用元素已知高度的一半的負margin-top值，在本例中-9px 。

 html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }

 <div class="container"> <p>I'm vertically/horizontally centered!</p> </div>

---

• 方法 5 - line-height方法（最不靈活 - 不建議）：

  示例在這里

  在某些情況下，父元素將具有固定的高度。 對於垂直居中，您所要做的就是在子元素上設置一個等於父元素的固定高度的line-height值。

  盡管此解決方案在某些情況下會起作用，但值得注意的是，當有多行文本時它不起作用 -像 this 。

 .parent { height: 200px; width: 400px; background: lightgray; text-align: center; } .parent > .child { line-height: 200px; }

 <div class="parent"> <span class="child">I'm vertically/horizontally centered!</span> </div>

Answer 2

如果 CSS3 是一個選項（或者你有一個后備），你可以使用轉換：

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

與上面的第一種方法不同，您不想將 left:50% 用於否定翻譯，因為 IE9+ 中存在溢出錯誤。 使用正的右值，您將看不到水平滾動條。

Answer 3

下面是如何使用兩個簡單的 flexbox 屬性在兩個軸上將n 個div 居中：

• 設置容器的高度：這里將主體設置為至少 100 視口高度。
• align-items: center; 如果 flex 方向是 row 則將塊垂直居中如果 flex 方向是 column 則水平居中
• justify-content: space-around; 如果 flex 方向是 row 則垂直分配可用空間，否則如果 flex 方向是 div 元素周圍的 column 則水平分配

 body { min-height: 100vh; display: flex; align-items: center; justify-content: space-around; }

 <div>foo</div> <div>bar</div>

Answer 4

將盒子垂直和水平居中的最佳方法是使用兩個容器：

外部容器：

• 應該有display: table;

內部容器：

• 應該有display: table-cell;
• 應該有vertical-align: middle;
• 應該有text-align: center;

內容框：

• 應該有display: inline-block;
• 應該調整水平文本對齊，除非您希望文本居中

演示：

 body { margin : 0; } .outer-container { display: table; width: 80%; height: 120px; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; }

 <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div>

另見這個小提琴！

在頁面中間居中：

要將您的內容置於頁面中間，請將以下內容添加到您的外部容器中：

• position : absolute;
• width: 100%;
• height: 100%;

這是一個演示：

 body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; height: 100%; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; }

 <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div>

另見這個小提琴！

Answer 5

CSS Grid: place-items

最后，我們有place-items: center讓 CSS Grid 更容易。

HTML

<div class="parent">
  <div class="to-center"></div>
</div>

CSS

.parent {
  display: grid;
  place-items: center;
}

輸出：

 html, body { height: 100%; } .container { display: grid; place-items: center; height: 100%; } .center { background: #5F85DB; color: #fff; font-weight: bold; font-family: Tahoma; padding: 10px; }

 <div class="container"> <div class="center" contenteditable>I am always super centered within my parent</div> </div>

Answer 6

運行此代碼片段並查看垂直和水平對齊的 div。

 html, body, .container { height: 100%; width: 100%; } .container { display: flex; align-items: center; justify-content: center; } .mydiv { width: 80px; }

 <div class="container"> <div class="mydiv">h & v aligned</div> </div>

Answer 7

 .align { display: flex; width: 400px; height: 400px; border: solid 1px black; align-items: center; justify-content: space-around; } .align div:first-child { width: 20px; height: 20px; background-color: red; position: absolute; } .align div { width: 20px; height: 20px; background-color: blue; }

 <div class='align'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

第一個孩子將在中心垂直和水平對齊

Answer 8

另一種方法是使用表：

 <div style="border:2px solid #8AC007; height:200px; width:200px;"> <table style="width:100%; height:100%"> <tr style="height:100%"> <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td> </tr> </table> </div>

Answer 9

將 Div 在頁面中居中檢查小提琴鏈接

 #vh { border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); padding: 25px; width: 200px; height: 200px; background: white; text-align: center; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

 <div id="vh">Div to be aligned vertically</div>

更新另一個選項是使用彈性框檢查小提琴鏈接

 .vh { background-color: #ddd; height: 200px; align-items: center; display: flex; } .vh > div { width: 100%; text-align: center; vertical-align: middle; }

 <div class="vh"> <div>Div to be aligned vertically</div> </div>

Answer 10

以下是獲得所需結果的 Flex-box 方法

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Flex-box approach</title> <style> .tabs{ display: -webkit-flex; display: flex; width: 500px; height: 250px; background-color: grey; margin: 0 auto; } .f{ width: 200px; height: 200px; margin: 20px; background-color: yellow; margin: 0 auto; display: inline; /*for vertically aligning */ top: 9%; /*for vertically aligning */ position: relative; /*for vertically aligning */ } </style> </head> <body> <div class="tabs"> <div class="f">first</div> <div class="f">second</div> </div> </body> </html>

Answer 11

網格 css 方法

 #wrapper { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } .main { background-color: #444; }

 <div id="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box main"></div> </div>

Answer 12

來源鏈接

方法一）顯示類型flex

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

方法 2) 2D 變換

.child-element { top: 50%; left: 50%; transform: translate(-50% , -50%); position: absolute; }

在此處查看其他方法

Answer 13

需要遵循以下新的簡單解決方案：

 .centered-class { align-items: center; display: flex; justify-content: center; width: 100vw; height: 100vh; }

 <div class="centered-class"> I'm in center vertically and horizontally. </div>

Answer 14

對我來說最簡單和最干凈的解決方案是使用 CSS3 屬性“transform”：

 .container { position: relative; } .container a { position: absolute; top: 50%; transform: translate(0,-50%); }

 <div class="container"> <a href="#">Hello world!</a> </div>

Answer 15

為了使元素垂直和水平居中，我們還可以使用下面提到的屬性。

此 CSS 屬性垂直對齊項目並接受以下值：

flex-start ：項目與容器頂部對齊。

flex-end ：項目與容器底部對齊。

center ：項目在容器的垂直中心對齊。

baseline ：項目顯示在容器的基線處。

拉伸：拉伸項目以適應容器。

這個 CSS 屬性justify-content水平對齊項目並接受以下值：

flex-start ：項目與容器的左側對齊。

flex-end ：項目與容器的右側對齊。

center ：項目在容器的中心對齊。

space-between ：項目以相等的間距顯示。

space-around ：項目以相等的間距顯示在它們周圍。

Answer 16

只需將頂部、底部、左側和右側設為 0。

<html>
<head>
<style>
<div> 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

<div> I am in the middle</div>

</body>
</html>

Answer 17

您可以使用 CSS（您的元素display:inline-grid + grid-auto-flow: row; ） Grid 和 Flex Box （父元素display:flex; ）來實現這一點，

見下面的片段

 #leftFrame { display: flex; height: 100vh; width: 100%; } #tabs { display: inline-grid; grid-auto-flow: row; grid-gap: 24px; justify-items: center; margin: auto; } html,body { margin:0; padding:0; }

 <div> <div id=leftFrame> <div id=tabs> <div>first</div> <div>second</div> </div> </div> </div>

Answer 18

這應該有效

 .center-div { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; }

 <div class="center-div">Center Div</div>

Answer 19

如果你更喜歡沒有flexbox、grid、table 或vertical-align: middle;

你可以做：

HTML

<div class="box">
    <h2 class="box__label">square</h2>
</div>

CSS

.box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    text-align: center;
    border: 1px solid black;
}

.box__label {
    box-sizing: border-box;
    display: inline-block;
    transform: translateY(50%);
    text-align: center;
    border: 1px solid black;
}

Answer 20

如果它只是關於文本對齊它可以非常簡單，只需使用這個：

vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/

不需要父親風格或類似的東西。 當然，在某些情況下，當父親具有某些樣式屬性時，它可能會在此解決方案中影響孩子，並且此解決方案將無法正常工作。

Answer 21

• 方法 6

 /*Change units to "%", "px" or whatever*/ #wrapper{ width: 50%; height: 70vh; background: rgba(0,0,0,.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #left{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background: red; } #right{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background: green; } .txt{ text-align: center; line-height: 50vh; }

 <div id="wrapper"> <div id="left" class="txt">Left</div> <div id="right" class="txt">Right</div> </div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

Answer 22

將 div 垂直和水平居中的最簡單方法如下：

 <div style="display: table; width: 200px; height: 200px; border: 1px solid black;"> <div style="display: table-cell; vertical-align: middle; text-align: center;"> Text Here </div> </div>

再舉一個例子：

.parent {
    display: table; 
    width: 100%; 
    height: 100%;
}

.child {
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}


<div class="parent">
    <div class="child">
        <h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
    </div>
</div>

Answer 23

很簡單！ 在容器上使用display flex，在文本上使用margin自動！

#hood{

 width : 300px;
 height: 100px;
 border: solid 1px #333333;
 display: flex; 
}

#hood span{

  margin: auto
}



<html>
<head></head>
    <body>
        <div id="hood">
            <span> I Am Centered</span>
        </div>
    </body>
</html>

演示： https : //jsfiddle.net/ay95f08g/

經過測試：MacOs Mojave上的Safari，Chrome，Firefox和Opera。 （所有最后更新時間為2019年2月25日）

Answer 24

這是人們在搜索時可能會來到此頁面的一個相關問題：當​​我想將 div 居中以獲得“等待..”100px 方形動畫 gif 時，我使用：

.centreDiv {
    position: absolute;
    top:     -moz-calc(50vh - 50px);
    top:  -webkit-calc(50vh - 50px);
    top:          calc(50vh - 50px);
    left:    -moz-calc(50vw - 50px);
    left: -webkit-calc(50vw - 50px);
    left:         calc(50vw - 50px);
    z-index: 1000; /* whatever is required */
}

Answer 25

最簡單的flexbox方法：

將單個元素垂直和水平居中的最簡單方法是將其設置為彈性項目並將其邊距設置為auto ：

如果您將自動邊距應用於彈性項目，該項目將自動擴展其指定邊距以占用彈性容器中的額外空間......

 .flex-container { height: 150px; display: flex; } .flex-item { margin: auto; }

 <div class="flex-container"> <div class="flex-item"> This should be centered! </div> </div>

這種在每個方向上的邊距擴展會將元素精確地推到其容器的中間。

Answer 26

我使用這個 CSS 代碼：

display: grid;
justify-content: center;
align-items: center;

來源是CSS-Tricks

Answer 27

在我試圖在button::before和button::after中垂直對齊文本內容的情況下，我能夠使用vertical-align: text-top讓它工作。

button::after {
  vertical-align: text-top;
}