using calc() to center divs

Question

I was working on my portfolio and I needed to center a div to the viewport height and width.. by using calc I was able to achieve it but I want to center divs without needing to type the calc over and over again

/*what i tried*/

#piece{
    top: calc((150px - attr(height))/2);
    left: calc((150px - attr(height))/2);
    position: absolute;
}

.piece-1{
    height: 150px;
    aspect-ratio: 1/1;
    background-color: #00FEFC;
}

.piece-2{
    height: 100px;
    aspect-ratio: 1/1;
    background-color: #FF3131;
}

.piece-3{
    height: 70px;
    aspect-ratio: 1/1;
    background-color: blanchedalmond;
}

.piece-4{
    height: 40px;
    aspect-ratio: 1/1;
    background-color: aquamarine;
}

            <div class="loading">
                <div class="piece-1" id="piece"></div>
                <div class="piece-2" id="piece"></div>
                <div class="piece-3" id="piece"></div>
                <div class="piece-4" id="piece"></div>
            </div>

here i have divs with different class name and same id. i want to use use calc() to center all of them by just using the attribute name.. i could type the code in all four divs but I was wondering if I could do it in 2 line of codes

Let's start with the absolute basics: IDs need to be unique ... — CBroe, Jul 07 '23 at 11:17
Also, using (typed) `attr(name)` in calc is AFAIK not implemented nor finally standardized, yet (drafted in css-values-5). https://drafts.csswg.org/css-values-5/#funcdef-attr — myf, Jul 07 '23 at 11:39
with grid, you almost got your 2 lines of code without absolute positionning : https://codepen.io/gc-nomade/pen/MWzEEwZ . Have fun — G-Cyrillus, Jul 07 '23 at 11:50

monny · Accepted Answer · 2023-07-07T11:47:34.527

Here is a solution without calculation. You can have the same result with transform: translate() for X and Y and display: flex

Also, I have updated your HTML and CSS because each id should be unique.

/*what i tried*/
.loading{
  display: flex;
  justify-content: center;
}

.piece{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    aspect-ratio: 1/1;
}

#piece-1{
    height: 150px;
    background-color: #00FEFC;
}

#piece-2{
    height: 100px;
    background-color: #FF3131;
}

#piece-3{
    height: 70px;
    background-color: blanchedalmond;
}

#piece-4{
    height: 40px;
    background-color: aquamarine;
}

 <div class="loading">
    <div id="piece-1" class="piece"></div>
    <div id="piece-2" class="piece"></div>
    <div id="piece-3" class="piece"></div>
    <div id="piece-4" class="piece"></div>
</div>

hello, with grid , you can do without absolute positionning : https://codepen.io/gc-nomade/pen/MWzEEwZ ;) — G-Cyrillus, Jul 07 '23 at 11:48

using calc() to center divs

1 Answers1