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

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图将标签内容垂直居中，但是当我添加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- transformtranslateX/ 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方法：

在支持的浏览器中，将display目标元素的设置为flex并align-items: center用于垂直居中和justify-content:

center水平居中。只是不要忘记为其他浏览器支持添加供应商前缀。

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>

  • 方法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: 0auto，假设元素是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>

  • 方法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;
}
<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

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

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

以上是 如何将元素水平和垂直居中 的全部内容， 来源链接： utcz.com/qa/397571.html

回到顶部