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

小编典典

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

all

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

阅读 92

2022-03-13

共1个答案

小编典典

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

此处示例 /
全屏示例

在支持的浏览器中，将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。然后对于子元素，更改displaytotable-cell和 add 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;

}


<section class="parent">

    <div class="child">I'm vertically/horizontally centered!</div>

</section>

50%方法 4 -从顶部绝对定位，有位移：

此处示例 /
全屏示例

这种方法假设文本有一个已知的高度——在这种情况下，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>

2022-03-13