How to center a row based on one of the columns in the row?

Question

To all my CSS/HTML Masters, suppose I have 3 columns in a row, and each column is a different size (see image).

Imagine I want to center the 2nd column in the center of my page.

If I were to just center the content of this row using justify-content: center, it would center the total row as it is below.

But what if I wanted to center only the 2nd column in the center of my page, kinda like centering the row based on only one of the columns, but still keeping all columns in a row.

Is this possible? Thanks.

PS: No obvious answers like "add margin-left to the row", the solution needs to be dynamic and responsive.

<!-- Code using bootstrap v15 classes -->

<div class="row w-100">
    <div class="col-2 purple-bg">
        <span>1st column</span>
    </div>

    <div class="col-4 green-bg">
        <span>2nd column</span>
        <b class="d-block">I want this column to be centered in the page</b>
    </div>

    <div class="col-6 red-bg">
        <span>3rd column</span>
    </div>
</div>

do you need something like this? https://snipboard.io/0u6Svo.jpg — Mohammed Malek, Mar 16 '23 at 09:27
@MohammedMalek in that example, the first and last column are equal in width so centering the middle column is easy, here all columns are unequal which makes it difficult. — richardrobu, Mar 16 '23 at 09:33
You need to add a [reprex], but also *explain in your question* whether the row needs to be moved (as is) or that the column widths are allowed to be changed (change space distribution). — Rene van der Lende, Mar 16 '23 at 09:34

Sleepwalker · Accepted Answer · 2023-03-20T10:56:36.083

Grids are pretty useful for this. You can make 3 columns, place the left element in the first, the right element in the third, and the centered element in the center column, then just justify the first column element to the right.

.container{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
}

.col1{
    background-color: purple;
    width: 70px;
    grid-column: 1;
    justify-self: right;
}

.col2{
    background-color: green;
    width: 50px;
    grid-column: 2;
}

.col3{
    background-color: red;
    width: 90px;
    grid-column: 3;
}

.col{
    height: 20px;
    grid-row: 1;
}

/* Page setup */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.vert{
    position: absolute;
    left: 50%;
    right: 50%;
    background-color: blue;
    height: 100vh;
    width: 1px;
    z-index: 10;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

<body>
    <div class="vert"></div>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
    </div>
</body>

This post was labelled as duplicate since its very similar to [Align 3 unequal blocks left, center and right](https://stackoverflow.com/questions/55393088/align-3-unequal-blocks-left-center-and-right). However I found your answer the best suitable solution since we can set custom width's for our columns. If we use flex-box we cannot do this, it is calculating the width's of column 1 and 3 automatically — richardrobu, Mar 18 '23 at 13:52

How to center a row based on one of the columns in the row?

1 Answers1