如何水平和垂直居中元素

Question

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

Answer 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/ bodyelement的高度设置为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;
}

<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在子元素上设置一个等于父元素固定高度的值.

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

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

Answer 2

如果CSS3是一个选项(或者你有一个后备),你可以使用transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

与上面的第一种方法不同,您不希望使用left:50%使用负面翻译,因为IE9 +中存在溢出错误.利用正数值,您将看不到水平滚动条.

Answer 3

CSS Grid: place-items

最后，我们place-items: center使用 CSS Grid 使其变得更容易。

超文本标记语言

<div class="parent">
  <div class="to-center"></div>
</div>

CSS

.parent {
  display: grid;
  place-items: center;
}

输出：

html,
body {
  height: 100%;
}

.container {
  display: grid;
  place-items: center;
  height: 100%;
}

.center {
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
  padding: 10px;
}

<div class="container">
  <div class="center" contenteditable>I am always super centered within my parent</div>
</div>

Answer 4

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

外侧容器:

• 应该有 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>

另见这个小提琴!

居中在页面中间:

要将内容置于页面中间,请将以下内容添加到外部容器中:

• position : absolute;
• width: 100%;
• height: 100%;

这是一个演示:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    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>

另见这个小提琴!

Answer 5

运行此代码片段并查看垂直和水平对齐的 div。

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}

<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

Answer 6

这是如何使用2个简单的flex属性将n个 div以2轴为中心：

• 设置容器的高度：在此将主体设置为至少100vh。
• align-items: center 将块垂直居中
• justify-content: space-around 将在div周围分配免费的水平空间

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<div>foo</div>
<div>bar</div>