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

我试图垂直居中我的标签内容，但是当我添加CSS样式display:inline-flex ，水平文本alignment消失。

我怎样才能使我的每个标签的文本alignmentx和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%)结合dynamic垂直/水平居中元素。

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

---

• 方法2 – Flexbox方法：

  示例在这里 / 全屏示例

  在受支持的浏览器中 ，将目标元素的display设置为flex并使用align-items: center for vertical centering和justify-content: center for horizo​​ntal centering。 不要忘记添加供应商前缀以获得更多浏览器支持（ 请参阅示例 ）。

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

---

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

  示例在这里 / 全屏示例

  在某些情况下，您需要确保html / body元素的高度设置为100% 。

  对于垂直alignment，将父元素的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; } 

---

• 方法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; } 

---

• 方法5 – line-height方法（最不灵活 – 不build议）：

  示例在这里

  在某些情况下，父元素将有一个固定的高度。 对于垂直居中，您所要做的就是在子元素上设置一个等于父元素固定高度的line-height值。

  虽然这个解决scheme在某些情况下会起作用，但是值得注意的是，当有多行文本时，这种方法是行不通的。

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

Answer 2

如果CSS3是一个选项（或者你有一个后备），你可以使用transform：

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

与上面的第一种方法不同，您不想使用left：50％的负面翻译，因为IE9 +中存在溢出错误。 利用正确的正确值，您将看不到水平滚动条。

Answer 3

将盒子垂直和水平放置的最佳方法是使用两个容器：

外面的容器：

• 应该有display: table;

内胆：

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

内容框：

• 应该有display: inline-block;
• 应该调整水平文本alignment，除非你想文本居中

演示：

 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> 

Answer 4

对我来说最简单和最干净的解决scheme是使用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 5

在一个页面中心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> 

Answer 6

另一种方法是使用表格：

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

• 方法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> 

Answer 9

以下是获取所需结果的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 10

运行这段代码，看到一个垂直和水平alignment的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 11

只要使顶部，底部，左侧和右侧为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 12

为了垂直和水平居中一个元素，我们也可以使用下面提到的属性。

此CSS属性垂直alignment项目并接受以下值：

flex-start ：项目alignment到容器的顶部。

flex-end ：项目alignment到容器的底部。

中心 ：项目在容器的垂直中心alignment。

基线 ：项目显示在容器的基线上。

拉伸 ：项目被拉伸以适应容器。

这个CSS属性justify-content ，它横向排列项目并接受下列值：

flex-start ：项目alignment容器的左侧。

flex-end ：项目alignment到容器的右侧。

中心 ：项目在容器的中心alignment。

空格之间 ：项目以相等的间距显示。

space-around ：项目以相等的间距显示在他们周围。