如何在 x 和 y 轴的中间对齐元素？

Question

我只想将数字放在弹性项目的中间，但我不知道该怎么做。我尝试了很多方法，但其中 none 与 flexbox 一起工作...这只是一个学习 material 我在其中试验 flexbox 所以我想坚持使用此显示。

正如我所说，我尝试了很多方法，所以可能有些东西不需要在那里，对此感到抱歉。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Flex</title>
        <style>
            * {
                margin: 0px;
            }
            
            .con {
                display: flex;
                background-color: aquamarine;
                border: 4px solid wheat;
                padding: 16px;
                height: 511px;
                width: 95%;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin: 0px;
            }

            .i {
                height: 60px;
                width:  400px;
                background-color: red;
                border: 4px solid darkslategray;
                flex: 1 1 auto;
            }

            #i2  {
                flex: 2 4 auto;
            }

            p {
                position: relative;
                vertical-align: middle;
                text-align: center;
                margin: 0 auto;
                width: 20px;
                height: 20px;
            }
        </style>
    </head>
    <body>
        <div class="con">
            <div id="i1" class="i"><p>1</p></div>
            <div id="i2" class="i"><p>2</p></div>
            <div id="i3" class="i"><p>3</p></div>
        </div>
    </body>
</html>

Answer 1

也许你可以使用 this

我只是在里面添加了一些额外的弹性 con class:

.con > div {
  display: flex;
  align-items: center;
}

Answer 2

这是因为您的 <div class='i'></div> 元素在 css 中的高度为 60px。所以他们是那些使他们所在的块的整个高度的人。

给每个 <div class='i'></div> 个元素 display: flex; 和 align-items: center;。这将使数字在 x 轴和 y 轴上居中。

这是 CodePen：https://codepen.io/Juka99/pen/qBVJdNv

Answer 3

你可以通过 display: flex 或者 position: absolute

 /* can used display flex */

.con > div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
 /* or used position */
 .con > div {
       position: relative;
    }

 .con > div p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

Answer 4

你可以使用 display: flex; align-items：中心；对于.i class

如何在 x 和 y 轴的中间对齐元素？

How to align any element in the midle of x and y axes?

html

css

flexbox

alignment