关于html：如何水平和垂直居中元素


How to center an element horizontally and vertically

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

如何使每个选项卡的文本对齐X和Y？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
* { 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;
}
1
2
    first
    second

相关讨论

  • 方法：1 transformtranslateX/ translateY

    这里的例子/全屏幕的例子

    在支持的浏览器(大多数的人)，你可以使用一个left: 50%top: 50%/组合/ horizontally dynamically translateX(-50%) translateY(-50%)到垂直中心位置的元素。

1
2
3
4
5
6
7
8
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
1
    <span>I'm vertically/horizontally centered!</span>

  • 方法2：flexbox法

    这里的例子/全屏幕的例子

    在支持的浏览器的设置，一个元素的displayflexalign-items: center靶向和使用垂直和水平为中心justify-content: center为中心。只是不要忘记添加额外的浏览器支持供应商前缀(湖的例子)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
}
1
  <span>I'm vertically/horizontally centered!</span>

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

    这里的例子/全屏幕的例子

    在某些情况下，你需要确保的是，html元/ body的身高是设置为100%。

    为垂直排列，设置父元素的width/ height到100%display: table和添加。然后在子元素，改变display到table-cellvertical-align: middle和添加。

    中心的水平，你可以添加到任何text-align: center中心文本和任何其他元素inline儿童。你也可以使用，如果是blockmargin: 0 auto，在元件的水平。

1
2
3
4
5
6
7
8
9
10
11
12
13
html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
1
2
3
<section class="parent">
    I'm vertically/horizontally centered!
</section>

  • 方法4的位置是在一个50%顶位移：

    这里的例子/全屏幕的例子

    本方法是，assumes a known高。文本在本实例，18px。只是绝对定位的元素从上到50%相对父元素。这是使用一个负价值的margin-top帮助已知元素的高度，在这-9px案例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}
1
2
3
    <p>
I'm vertically/horizontally centered!
</p>

  • 方法5 line-height(最小二乘法的柔性不建议)：

    这里的例子

    在某些情况下，要有一个固定的父元素的高度。为垂直中心，所有你需要做的是设置一个line-height价值相等的子元素的父元素的固定高度。

    我想我在这个解决方案工作，值得记录，它不工作，当有多线样本的文本。

1
2
3
4
5
6
7
8
9
10
.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}
1
    <span class="child">I'm vertically/horizontally centered!</span>

相关讨论

如果CSS3(或是你有一个选择：你可以使用变换后)

1
2
3
4
5
6
.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

不同于上述第一法，你不想使用左：50%的翻译，因为它在负溢出的错误在IE9的+。使用积极的价值和你不会有水平滚动条滚动条湖。

相关讨论

最好的办法是和horizontally垂直中心一箱，是使用两个容器：

在原料容器

  • 要display: table;

容器的内部。

  • 要display: table-cell;
  • 要vertical-align: middle;
  • 要text-align: center;

盒内容：

  • 要display: inline-block;
  • 应调整水平对齐文本，除非你想要的文本为中心

演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;
}
1
        Center this!

因此，这个湖的小提琴！

中心中页面：

中心内容到你的页面中，添加以下到您的原料容器

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

这是一个演示的那个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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;
}
1
        Center this!

因此，这个湖的小提琴！

运行此代码段A和湖和horizontally垂直对准。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}
1
  h & v aligned

最简单的解决方案是与我交物业使用CSS3的"变换"：

1
2
3
4
5
6
7
8
9
.container {
  position: relative;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    .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;
    }
1
 

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

另一种方法是使用表格：

1
2
3
4
5
  <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>

一个中心位置在A页面的div check link小提琴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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;
}
1
Div to be aligned vertically

更新另一个选项是使用Flex的link check小提琴盒

1
2
3
4
5
6
7
8
9
10
11
.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
1
    Div to be aligned vertically

下面是Flex盒所需的方法得到的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  Flex-box approach
<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>

   
        first
        second        
   

</body>
</html>

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

此css属性垂直对齐项目并接受以下值：

弹性开始：项目与容器顶部对齐。

柔性端：物品与容器底部对齐。

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

基线：项显示在容器的基线处。

拉伸：拉伸物品以适合容器。

此css属性调整内容，内容水平对齐并接受以下值：

柔性启动：项目与容器左侧对齐。

柔性端：物品与容器右侧对齐。

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

间隔：项目之间的间隔相等。

周围间距：项目周围显示的间距相等。

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

  • 设置容器的高度：这里的主体被设置为至少100vh。
  • align-items: center将垂直居中块体。
  • justify-content: space-around将在分隔带周围分配自由水平空间。

1
2
3
4
5
6
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
1
2
foo
bar

网格CSS方法

1
2
3
4
5
6
7
8
9
10
11
12
13
#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;
}
1
 

您可以使用css(您的元素display:inline-grid和grid-auto-flow: row;网格和flex box(父元素display:flex;实现此目的，

请参见下面的代码段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#leftFrame {
  display: flex;
  height: 100vh;
  width: 100%;
}

#tabs {
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 24px;
  justify-items: center;
  margin: auto;
}

html,body {
  margin:0;
  padding:0;
}
1
2
    first
    second

  • 方法6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*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;
}
1
2
   Left
   Right

1
2
3
4
5
6
7
8
9
10
    .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;
    }

垂直和水平居中DIV的最简单方法如下：

1
        Text Here

再举一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent {
    display: table;
    width: 100%;
    height: 100%;
}

.child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}



   
        <h4><u>SERVICE IN BANGLADESH FLEET RESERVE  AND  RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>

简单！在容器上使用display flex，在文本上使用margin auto！！！！！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#hood{

 width : 300px;
 height: 100px;
 border: solid 1px #333333;
 display: flex;
}

#hood span{

  margin: auto
}



<html>
<head></head>
    <body>
       
            <span> I Am Centered</span>
       
    </body>
</html>

演示：https://jsfiddle.net/ay95f08g/

测试：MacOS Mojave上的Safari、Chrome、Firefox和Opera。(所有最新更新日期为2019年2月25日)

只需将顶部、底部、左侧和右侧设置为0。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<style>
 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

 I am in the middle

</body>
</html>

这应该管用

1
2
3
4
5
6
7
8
.center-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}
1
Center Div

源链接

Method 1) Display type flex

1
2
3
4
5
.child-element{
     display: flex;
     justify-content: center;
     align-items: center;
}

Method 2) 2D Transform

1
2
3
4
5
6
.child-element {
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
   position: absolute;
}

请参阅此处的其他方法