Centering one product on a single page [closed]

To center with CSS you have to stop it from floating left then put auto on the margin-left and margin-right.

ul.products li.product, .woocommerce-page ul.products li.product {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Can you add another class when there is only 1 item?

If you can’t there is a way in CSS to target a single child using :only-child.

ul.products li.product:only-child, .woocommerce-page ul.products li.product:only-child {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

You can center the Vouchers with this, but there is no css only way to know if there is only one item below. If you add a class via javascript it would help differentiate 1 vs. >1.

.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}