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

Question

提问by shuji

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

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

Answer 1

回答by Josh Crozier

Approach 1 - transformtranslateX/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.

方法 1 - transformtranslateX/ 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>

Approach 2 - Flexbox method:
Example Here/ Full Screen Example
In supported browsers, set the displayof the targeted element to flexand use align-items: centerfor vertical centering and justify-content: centerfor horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).

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

Approach 3 - table-cell/vertical-align: middle:
Example Here/ Full Screen Example
In some cases, you will need to ensure that the html/bodyelement's height is set to 100%.
For vertical alignment, set the parent element's width/heightto 100%and add display: table. Then for the child element, change the displayto table-celland add vertical-align: middle.
For horizontal centering, you could either add text-align: centerto center the text and any other inlinechildren elements. Alternatively, you could use margin: 0 auto, assuming the element is blocklevel.

方法 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 {
    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-topvalue that is half of the element's known height, in this case - -9px.

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

Approach 5 - The line-heightmethod (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-heightvalue 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.

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

回答by Mr Bullets

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

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

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

与上面的第一种方法不同，您不想将 left:50% 与否定翻译一起使用，因为 IE9+ 中存在溢出错误。使用正确的正值，您将看不到水平滚动条。

Answer 3

回答by John Slegers

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

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

The outher container :

外部容器：

should have display: table;

应该有 display: table;

The inner container :

内部容器：

should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;

应该有 display: table-cell;
应该有 vertical-align: middle;
应该有 text-align: center;

The content box :

内容框：

should have display: inline-block;
should adjust the horizontal text-alignment, unless you want text to be centered

应该有 display: inline-block;
应该调整水平文本对齐方式，除非您希望文本居中

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>

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%;
height: 100%;

position : absolute;
width: 100%;
height: 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>

回答by Creaforge

Here is how to use 2 simple flex properties to center ndivs on the 2 axis:

以下是如何使用 2 个简单的 flex 属性在 2 轴上居中n 个div：

Set the height of your container: Here the body is set to be at least 100vh.
align-items: centerwill vertically center the blocks
justify-content: space-aroundwill distribute the free horizontal space around the divs

设置容器的高度：此处主体设置为至少 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>

Answer 5

回答by JFathi

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>

Answer 6

回答by Krishna

    .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

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

Answer 7

回答by tocqueville

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>

Answer 8

回答by iamcoming

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>

Answer 9

回答by Nerdroid

to center the Div in a page check the fiddle link

在页面中居中 Div check the fiddle link

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

UpdateAnother option is to use flex box check the fiddle link

更新另一种选择是使用弹性框 check the fiddle link

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

Answer 10

回答by Manish62

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>

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

提问by shuji

回答by Josh Crozier

Approach 1 - `transformtranslateX`/`translateY`:

方法 1 - `transformtranslateX`/ `translateY`：

Approach 2 - Flexbox method:

方法 2 - Flexbox 方法：

Approach 3 - `table-cell`/`vertical-align: middle`:

方法 3 - `table-cell`/ `vertical-align: middle`：

Approach 4 - Absolutely positioned `50%`from the top with displacement:

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

Approach 5 - The `line-height`method (Least flexible - not suggested):

方法 5 -`line-height`方法（最不灵活 - 不建议）：

回答by Mr Bullets

回答by John Slegers

The outher container :

外部容器：

The inner container :

内部容器：

The content box :

内容框：

Demo :

演示：

Centering in the middle of the page:

在页面中间居中：

回答by Creaforge

回答by JFathi

回答by Krishna

回答by tocqueville

回答by iamcoming

回答by Nerdroid

回答by Manish62

相关推荐

最近更新

标签

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

提问by shuji

回答by Josh Crozier

Approach 1 - transformtranslateX/translateY:

方法 1 - transformtranslateX/ translateY：

Approach 2 - Flexbox method:

方法 2 - Flexbox 方法：

Approach 3 - table-cell/vertical-align: middle:

方法 3 - table-cell/ vertical-align: middle：

Approach 4 - Absolutely positioned 50%from the top with displacement:

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

Approach 5 - The line-heightmethod (Least flexible - not suggested):

方法 5 -line-height方法（最不灵活 - 不建议）：

回答by Mr Bullets

回答by John Slegers

The outher container :

外部容器：

The inner container :

内部容器：

The content box :

内容框：

Demo :

演示：

Centering in the middle of the page:

在页面中间居中：

回答by Creaforge

回答by JFathi

回答by Krishna

回答by tocqueville

回答by iamcoming

回答by Nerdroid

回答by Manish62

相关推荐

Html 如何将无序列表居中？

Html 屏幕大小改变时如何改变CSS

如何在单个 HTML 表单中提交多个值？

如何在 HTML 页面上向用户显示输入？

相关推荐

最近更新

标签

Approach 1 - `transformtranslateX`/`translateY`:

方法 1 - `transformtranslateX`/ `translateY`：

Approach 3 - `table-cell`/`vertical-align: middle`:

方法 3 - `table-cell`/ `vertical-align: middle`：

Approach 4 - Absolutely positioned `50%`from the top with displacement:

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

Approach 5 - The `line-height`method (Least flexible - not suggested):

方法 5 -`line-height`方法（最不灵活 - 不建议）：