How to make the image appear in the center up and down in css

Methods to use CSS to center the image up and down include: using flexbox, setting the flex-direction of the parent container to column, justify-content and align-items to center. Use absolute positioning, set the image's position to absolute, top and left to 50%, and use the transform attribute for offset. To use a grid layout, set the parent container's display to grid and place-items to center. Use the object-fit attribute to center the image

How to use CSS to center the image up and down

in CSS , you can use the following method to center the image up and down:

Method 1: Use flexbox

<code class="css">.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}</code>

Method 2: Use absolute positioning

<code class="css">.container {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

Method 3: Use grid layout

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}</code>

Method 4: Use object-fit attribute

<code class="css">img {
  object-fit: contain;
}</code>

Method 5 : Use padding

<code class="css">.container {
  padding: 20px 0;
}

img {
  height: 100px;
}</code>

Suggestions for choosing a method:

• If you need other elements around the image, use flexbox or grid layout.
• If the image size is fixed, use absolute positioning or object-fit attributes.
• If the image size is not fixed, it is recommended to use flexbox or grid layout.

The above is the detailed content of How to make the image appear in the center up and down in css. For more information, please follow other related articles on the PHP Chinese website!