Centered in a square regardless of width

centered-product-image.scss

        .product-image {
            height: 0;
            display: block;
            position: relative;
            z-index: 1;
            overflow: hidden;
            padding-bottom: 100%; 

            img {
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                height: auto;
                max-width: 100%;
            }
        }