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

 

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

  • 方法1 - transform translateX / translateY ：

    示例在这里 / 全屏幕示例

    在受支持的浏览器（大多数）中，可以使用top: 50% / left: 50%与translateX(-50%) translateY(-50%)结合动态垂直/水平居中元素。 

    .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% 。

    对于垂直对齐，将父元素的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 （最不灵活 - 不建议）：

    示例在这里

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

    虽然这种解决方案在某些情况下会起作用，但值得注意的是，当存在多行文本时它不起作用 - 像这样。 

    .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;
}

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

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

    外面的容器：

  • 应该有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>
    链接地址: http://www.djcxy.com/p/41639.html

    上一篇: How to center an element horizontally and vertically?

    下一篇: How to remove H1 formatting within ContentEditable (wysiwyg)