Flexbox problems need help

[bananahair]

I have a container that I want to center vertically and horizontally.

.box {
    display: flex;
    flex-direction: row;
    border: solid 1px transparent;
    align-items: center;
    justify-content: center;
    
}

It is centered horizontally but not vertically. What might I be neglecting?

[bbsmooth]

What you have here is centering the child elements in the .box container both horizontally and vertically. Is that what you want? Or are you trying to center the .box element itself?

[bananahair]

The .box element contains an image and text. I want all of that centered vertically and horizontally.

By centering the .box element, I thought the child elements within it would be centered as well. Am I misunderstanding something? Code below.

CSS

.box {
    display: flex;
    flex-direction: row;
    border: solid 1px transparent;
    align-items: center;
    justify-content: center;
    
}
/* Image */
img {
    display: block;
    max-width: 300px;
}

/* Text */
.information {
    width: 300px;
    padding: 20px 20px;
    background-color: var(--neutral-color-three);
}

.soft-title {
    padding-bottom: 20px;
    color: var(--neutral-color-two);
    font-family: Montserrat, sans-serif;
    letter-spacing: 0.5em;
    font-weight: 500;
    font-size: 0.6rem;
}

.bold-title {
    padding-bottom: 20px;
    max-width: 75%;
    font-family: Fraunces, sans-serif;
    font-weight: 700;
    font-size: 2.0rem;
    color: var(--neutral-color-one);
}

.description {
    font-family: Montserrat, sans-serif;
    color: var(--neutral-color-two);
    font-weight: 500;
    font-size: 0.8rem;
    word-spacing: 0.25rem;
    line-height: 1.7em;
    padding-bottom: 25px;
    max-width: 75%;
}

.price {
    display: flex;
    flex-direction: row;
    padding-bottom: 30px;
}

.price-lg {
    font-family: Fraunces;
    font-weight: 700;
    font-size: 2rem;
    color: var(--primary-color-one);
}

.price-sm {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 0.5rem;
    text-decoration: line-through;
    color: var(--neutral-color-two);
}


button {
    width: 250px;
    padding: 20px;
    background-color: var(--primary-color-one);
    color: var(--neutral-color-three);
    border: solid 1px var(--primary-color-one);
    border-radius: 10px;
}

HTML

<div class="box">

    <!--Image-->
  <div class="image"><img src="\images\image-product-desktop.jpg" alt="perfume"></div>


  <!--Text-->
<div class="information">
  <div class="soft-title">PERFUME</div>
  <div class="bold-title">Gabrielle Essence Eau De Parfum</div>
  <div class="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, 
  Perfumer-Creator for the House of CHANEL.</div>
  <div class="price">
  <div class="price-lg">$149.99</div> 
  <div class="price-sm">$169.99</div>
  </div>
  <button>Add to Cart</button>
</div>

[hbar1st]

I don’t think the css you have in .box is centering the box itself.

Try
margin: auto;

[Seba]

On my view, I think your box element does not contain the image class. So, the CSS formatting in .box will not be applicable to .image. My advice, create separate selector rules.

[bbsmooth]

I gave the image a width and height of 300px (since I don’t have the actual image you are using I needed to force some dimensions on it). With your current CSS, the image and information div are side by side and centered horizontally in the view port. It sounds like you also want them to be centered vertically as well? The reason they are not is because while a div stretches out as far as it can horizontally (which in this case means it’s as wide as the view port), it only stretches as far as it needs to vertically (which in this case means it’s only as tall as the height of the information div). So if you want to center them vertically in the view port then you either need to make the box div as tall as the view port or center the box div itself vertically on the page.

Centering in CSS: A Complete Guide