如何水平和垂直居中元素

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

如果CSS3是一个选项（或者你有一个后备），你可以使用transform：

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

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

Answer 2

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

外侧容器：

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

另见这个小提琴！