温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - How to center an element horizontally and vertically

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

发布于 2020-03-27 11:16:04

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

查看更多

查看更多

提问者
shuji
被浏览
130
5,353 2018-09-04 17:53
  • 方法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方法:

    此处示例 /全屏示例

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

    Example Here / Full Screen Example

    In some cases, you will need to ensure that the html/body element's height is set to 100%.

    For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

    For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto, assuming the element is block level.

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:

    Example Here / Full Screen Example

    This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -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):

    Example Here

    在某些情况下,父元素将具有固定的高度。对于垂直居中,您要做的就是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>