如何水平和垂直居中元素 [英] How to center an element horizontally and vertically

问题描述

我试图将标签内容垂直居中，但是当我添加 CSS 样式 display:inline-flex 时，水平文本对齐消失了.

如何使每个标签的文本对齐 x 和 y?

* { box-sizing: border-box;}#leftFrame {背景颜色:绿色；位置:绝对；左:0；正确:60%；顶部:0；底部:0；}#leftFrame #tabs {背景颜色:红色；位置:绝对；顶部:0；左:0；右:0；高度:25%；}#leftFrame #tabs div {边框:2px纯黑色；位置:静态；向左飘浮;宽度:50%；高度:100%；文本对齐:居中；显示:inline-flex；对齐项目:居中；}

<div id=tabs><div>先</div><div>第二</div>

解决方案

• 方法一 - transform translateX/translateY:

  此处示例/全屏示例

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

.container {位置:绝对；顶部:50%；左:50%；-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);变换:translateX(-50%) translateY(-50%)；}

<span>我垂直/水平居中！</span>

<小时>

• 方法 2 - Flexbox 方法:

  示例/全屏示例

  在支持的浏览器中，将目标元素的display设置为flex 并使用 align-items: center 进行垂直居中，使用 justify-content: center 进行水平居中.只是不要忘记添加供应商前缀以获得额外的浏览器支持(参见示例).

html, body, .container {高度:100%；}.容器 {显示:-webkit-flexbox；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-flex-align:居中；-ms-flex-align:居中；-webkit-align-items:居中；对齐项目:居中；对齐内容:居中；}

<span>我垂直/水平居中！</span>

<小时>

• 方法 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 {高度:100%；}.父母{宽度:100%；高度:100%；显示:表；文本对齐:居中；}.parent >.孩子 {显示:表格单元格；垂直对齐:中间；}

<div class="child">我垂直/水平居中！</div></section>

<小时>

• 方法 4 - 绝对位置 50% 从顶部位移:

  示例/全屏示例

  此方法假定文本具有已知高度 - 在本例中为 18px.相对于父元素，将元素 50% 从顶部绝对定位即可.使用负的 margin-top 值，它是元素已知高度的一半，在这种情况下 - -9px.

html, body, .container {高度:100%；}.容器 {位置:相对；文本对齐:居中；}.container >p{位置:绝对；顶部:50%；左:0；右:0；边距顶部:-9px；}

<p>我垂直/水平居中！</p>

<小时>

• 方法 5 - line-height 方法(最不灵活 - 不建议):

  示例

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

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

.parent {高度:200px；宽度:400px；背景:浅灰色；文本对齐:居中；}.parent >.孩子 {行高:200px；}

<span class="child">我垂直/水平居中！</span>

I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex, the horizontal text-align disappears.

How can I make both text alignments x and y for each of my tabs?

* { 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>

解决方案

• Approach 1 - transform translateX/translateY:

  Example Here / Full Screen Example

  In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

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

---

• Approach 2 - Flexbox method:

  Example Here / Full Screen Example

  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

  In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.

  Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like 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>

这篇关于如何水平和垂直居中元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！