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

本文翻译自：How to center an element horizontally and vertically

I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex , the horizontal text-align disappears. 我试图将标签内容垂直居中，但是当我添加CSS样式display:inline-flex ，水平文本对齐会消失。

How can I make both text alignments x and y for each of my tabs? 如何为每个选项卡都使文本对齐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> 

---

#1楼

参考：https://stackoom.com/question/1JepV/如何将元素水平和垂直居中

---

#2楼

• Approach 1 - transform translateX / translateY : 方法1- transform translateX / translateY ：

  Example Here / Full Screen Example 此处示例 / 全屏示例

  In supported browsers (most of them), you can use top: 50% / left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element. 在受支持的浏览器 （大多数）中，您可以将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> 

---

• Approach 2 - Flexbox method: 方法2-Flexbox方法：

  Example Here / Full Screen Example 此处示例 / 全屏示例

  In supported browsers , set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. 在支持的浏览器中 ，将目标元素的display设置为flex并使用align-items: center进行垂直居中， justify-content: center进行水平居中。 Just don't forget to add vendor prefixes for additional browser support ( see example ). 只是不要忘记为其他浏览器支持添加供应商前缀（ 请参阅示例 ）。

 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> 

---

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

  Example Here / Full Screen Example 此处示例 / 全屏示例

  In some cases, you will need to ensure that the html / body element's height is set to 100% . 在某些情况下，您需要确保html / body元素的高度设置为100% 。

  For vertical alignment, set the parent element's width / height to 100% and add display: table . 对于垂直对齐，将父元素的width / height为100%然后添加display: table 。 Then for the child element, change the display to table-cell and add vertical-align: middle . 然后，对于子元素，将display更改为table-cell并添加vertical-align: middle 。

  For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. 对于水平居中，可以添加text-align: center以使文本和任何其他inline子元素居中。 Alternatively, you could use margin: 0 auto , assuming the element is block level. 另外，您可以使用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> 

---

• Approach 4 - Absolutely positioned 50% from the top with displacement: 方法4-绝对从顶部移至顶部50% ：

  Example Here / Full Screen Example 此处示例 / 全屏示例

  This approach assumes that the text has a known height - in this instance, 18px . 这种方法假定文本的高度已知-在这种情况下为18px 。 Just absolutely position the element 50% from the top, relative to the parent element. 相对于父元素，绝对将元素从顶部定位50% 。 Use a negative margin-top value that is half of the element's known height, in this case - -9px . 使用负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> 

---

• Approach 5 - The line-height method (Least flexible - not suggested): 方法5- line-height方法（最不灵活-不建议）：

  Example Here 这里的例子

  In some cases, the parent element will have a fixed height. 在某些情况下，父元素将具有固定的高度。 For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element. 对于垂直居中，您要做的就是在子元素上将line-height值设置为等于父元素的固定高度。

  Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this . 尽管此解决方案在某些情况下可以使用，但值得注意的是，当有多行文本（ 例如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> 

---

#3楼

If CSS3 is an option (or you have a fallback) you can use transform: 如果CSS3是一个选项（或者您有一个备用），则可以使用transform：

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

Unlike the first approach above, you don't want to use left:50% with the negative translation because there's an overflow bug in IE9+. 与上面的第一种方法不同，您不想使用left：50％的否定翻译，因为IE9 +中存在溢出错误。 Utilize a positive right value and you won't see horizontal scrollbars. 使用正的正值，您将不会看到水平滚动条。

---

#4楼

Another approach is to use table: 另一种方法是使用表：

 <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> 

---

#5楼

The simplest and cleanest solution for me is using the CSS3 property "transform": 对我来说，最简单，最干净的解决方案是使用CSS3属性“ transform”：

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

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

---

#6楼

The best way to center a box both vertically and horizontally, is to use two containers : 垂直和水平放置框的最佳方法是使用两个容器：

The outher container : 外部容器：

• should have display: table; 应该有display: table;

The inner container : 内部容器：

• should have display: table-cell; 应该display: table-cell;
• should have vertical-align: middle; 应该具有vertical-align: middle;
• should have text-align: center; 应该具有text-align: center;

The content box : 内容框：

• should have display: inline-block; 应该display: inline-block;
• should adjust the horizontal text-alignment, unless you want text to be centered 除非您希望文本居中，否则应调整水平文本对齐方式

Demo : 演示：

 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> 

See also this Fiddle ! 另请参阅此小提琴 ！

Centering in the middle of the page: 在页面中间居中：

To center your content in the middle of your page, add the following to your outher container : 要将内容置于页面中间，请将以下内容添加到外部容器中：

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

Here's a demo for that : 这是一个演示：

 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> 

See also this Fiddle ! 另请参阅此小提琴 ！