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

我试图垂直居中我的标签内容,但是当我添加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> 

  • 方法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 / height100%并添加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; } 

如果CSS3是一个选项(或者你有一个后备),你可以使用transform:

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

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

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

外面的容器:

  • 应该有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> 

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

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

另一种方法是使用表格:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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