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

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

我尝试垂直居中标签内容，但当我添加css样式显示:inline-flex，水平文本对齐消失。

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

我如何使每个选项卡的文本对齐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>

13 个解决方案

#1

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

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

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  

---

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

  在受支持的浏览器中，将目标元素的显示设置为flex并使用对齐项:垂直定心中心和合理内容中心:水平定心中心。只是不要忘记为附加的浏览器支持添加供应商前缀(参见示例)。

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

---

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

  在某些情况下，您需要确保html/body元素的高度设置为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.

  对于垂直对齐，将父元素的宽度/高度设置为100%，并添加显示:table。然后，对于子元素，将显示改为table-cell，并添加垂直对齐: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.

  对于水平中心，您可以添加文本对齐:中心以中心文本和任何其他内联子元素。或者，您可以使用margin: 0 auto，假设元素是块级。

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }
  

---

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

  这种方法假定文本具有已知的高度—在本例中为18px。只需要将元素从顶部的50%定位到父元素。使用一个负边距值，该值是元素已知高度的一半，在本例中为-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;
  }
  

---

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

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

  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;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

#2

If CSS3 is an option (or you have a fallback) you can use transform:

如果CSS3是一个选项(或者你有退路)，你可以使用transform:

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

Unlike the first approach above, you don't want to use left:50% with the negative translation because there's an overflow bug in IE9+. Utilize a positive right value and you won't see horizontal scrollbars.

与上面的第一种方法不同，您不希望使用左侧:50%的负转换，因为在IE9+中存在溢出错误。使用一个正值，你不会看到水平滚动条。

#3

The best way to center a box both vertically and horizontally, is to use two containers :

垂直和水平放置盒子的最佳方式是使用两个容器:

The outher container :

• should have display: table;
• 应该显示:表;

The inner container :

• should have display: table-cell;
• 应该显示:表格单元;
• should have vertical-align: middle;
• 应该vertical-align:中间;
• should have text-align: center;
• 应该text-align:中心;

The content box :

• should have display: inline-block;
• 应该显示:inline-block;
• should adjust the horizontal text-alignment, unless you want text to be centered
• 是否应该调整水平文本对齐方式，除非你想要文本居中?

Demo :

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>

See also this Fiddle!

看到这个小提琴!

Centering in the middle of the page:

To center your content in the middle of your page, add the following to your outher container :

把你的内容放在你的页面中间，在你的其他容器中添加以下内容:

• position : absolute;
• 位置:绝对的;
• width: 100%;
• 宽度:100%;
• height: 100%;
• 高度:100%;

Here's a demo for that :

这里有一个演示:

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>

See also this Fiddle!

看到这个小提琴!

#4

The simplest and cleanest solution for me is using the CSS3 property "transform":

对我来说最简单、最干净的解决方案是使用CSS3属性“transform”:

.container {
  position: relative;
}

.container a {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

<div class="container">
  <a href="#">Hello world!</a>
</div>

#5

to center the Div in a page check the fiddle link

要将Div放在页面的中心，请检查小提琴链接

#vh {
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 200px;
    height: 200px;
    background: white;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<div id="vh">Div to be aligned vertically</div>

Update Another option is to use flex box check the fiddle link

更新另一个选项是使用flex box检查小提琴链接

.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

#6

Another approach is to use table:

另一种方法是使用表:

<div style="border:2px solid #8AC007; height:200px; width:200px;">
  <table style="width:100%; height:100%">
    <tr style="height:100%">
      <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
    </tr>
  </table>
</div>

#7

    .align {
        display: flex;
        width: 400px;
        height: 400px;
        border: solid 1px black;
        align-items: center;
        justify-content: space-around;
    }
    .align div:first-child {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute; 
    }
    .align div {
        width: 20px;
        height: 20px;
        background-color: blue;
    }

    <div class='align'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

First child will be aligned vertically and horizontally at center

第一个子节点将在中心垂直和水平对齐

#8

• Approach 6
• 方法6

/*Change units to "%", "px" or whatever*/

#wrapper{
  width: 50%;
  height: 70vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#left{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
}
#right{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: green;
}
.txt{
  text-align: center;
  line-height: 50vh;
}

<div id="wrapper">
   <div id="left" class="txt">Left</div>
   <div id="right" class="txt">Right</div>
</div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

#9

Below is the Flex-box approach to get desired result

下面是得到期望结果的Flex-box方法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex-box approach</title>
<style>
  .tabs{
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 250px;
    background-color: grey;
    margin: 0 auto;
    
  }
  .f{
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: inline; /*for vertically aligning */
    top: 9%;         /*for vertically aligning */
    position: relative; /*for vertically aligning */
  }
</style>
</head>
<body>

    <div class="tabs">
        <div class="f">first</div>
        <div class="f">second</div>        
    </div>

</body>
</html>

#10

Run this code snippet and see a vertically and horizontally aligned div.

运行此代码片段，并查看垂直和水平对齐的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>

#11

In order to vertically and horizontally center an element we can also use below mentioned properties.

为了使元素垂直和水平居中，我们还可以使用下面提到的属性。

This CSS property aligns-items vertically and accepts the following values:

此CSS属性垂直排列，并接受以下值:

flex-start: Items align to the top of the container.

弹性开始:项目对齐到容器的顶部。

flex-end: Items align to the bottom of the container.

弹性端:项目对齐到容器的底部。

center: Items align at the vertical center of the container.

中心:项目在容器的垂直中心对齐。

baseline: Items display at the baseline of the container.

基线:项目显示在容器的基线。

stretch: Items are stretched to fit the container.

拉伸:物品拉伸以适应容器。

This CSS property justify-content , which aligns items horizontally and accepts the following values:

此CSS属性equfy -content将项目水平对齐，并接受以下值:

flex-start: Items align to the left side of the container.

灵活启动:项目对齐到容器的左侧。

flex-end: Items align to the right side of the container.

弹性端:项目对齐到容器的右边。

center: Items align at the center of the container.

中心:项目对齐在容器的中心。

space-between: Items display with equal spacing between them.

空格:显示具有相同间距的项目。

space-around: Items display with equal spacing around them.

空格:在它们周围显示具有相同间隔的项。

#12

Just make top,bottom, left and right to 0.

把顶部，底部，左边和右边设为0。

<html>
<head>
<style>
<div> 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

<div> I am in the middle</div>

</body>
</html>

#13

Grid css approach

网格css的方法

#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.main {
    background-color: #444;
}

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box main"></div>
</div>