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

I just want to put the numbers in the midle of the flex items but I just can't figure out how to do it. I tried many ways but none of them worked with flexbox... It is just a learning material where I experiment with flexbox so I want to stick with this display.

As I said I tried many ways so there might be some things that are not needed to be there, sorry about that.

<!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 >
            <div id="i1" ><p>1</p></div>
            <div id="i2" ><p>2</p></div>
            <div id="i3" ><p>3</p></div>
        </div>
    </body>
</html>

CodePudding user response：

This is happening because your <div class='i'></div> elements have height of 60px in css. So they are the ones that make the whole height of the block they are inside of.

Give each of the <div class='i'></div> elements display: flex; and align-items: center;. This will center the numbers both on x and y axis.

Here is the CodePen: https://codepen.io/Juka99/pen/qBVJdNv

CodePudding user response：

Maybe you can use something like this

I just add some extra flex inside con class:

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

CodePudding user response：

you can use display: flex; align-items:center; for .i class

CodePudding user response：

You can do this by display: flex or or 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%);
    }