How can I center an image within a div block in Webflow, with dimensions of 140x140 and 100px radius corners? I have tried removing styles and following a tutorial, but I am unable to vertically center the image. The blue line also appears above the div instead of within it. Any suggestions?

TL;DR

Set the parent div to 140x140px, use Flexbox (align & justify center), and enable overflow: hidden.
Set the image size to 140x140px, apply 100px border-radius, and use object-fit: cover.
Check for negative margins, flex container alignment issues, or conflicting positioning styles if a blue line appears.
Optionally, use Grid layout instead of Flexbox for centering.

It sounds like you're trying to center a 140x140 image within a div block while ensuring it has a 100px border-radius for rounded corners. The issue with the blue line appearing above the div suggests a potential positioning or display issue. Follow these steps to properly center the image.

1. Set Up the Parent Div Block

Select the div block in Webflow.
In the Style panel, set:
Width: 140px
Height: 140px
Display: Flex
Flex Direction: Vertical
Align Items: Center
Justify Content: Center
Overflow: Hidden (to ensure no extra spacing)

2. Configure the Image Within the Div

Select the image element inside the div.
In the Style panel, set:
Width: 100% (or 140px to maintain fixed sizing)
Height: 100% (or 140px if not using 100%)
Border Radius: 100px (to create fully rounded corners)
Object Fit: Cover (to ensure the image fills without stretching)

3. Check Positioning Issues

If the blue line appears above the div, try:

Ensuring no negative margins are applied to the div or image.
Checking that the div is not inside an auto-aligned flex container affecting its position.
Verifying that no Webflow positioning styles (e.g., relative, absolute, or float) are interfering.

4. Alternative Method Using Grid

Set the parent div to Display: Grid (instead of Flex).
Set grid alignment to Center for both horizontal and vertical alignment.

Summary

To center the image in your Webflow div block:

Use Display: Flex on the parent div and set align-items & justify-content to center.
Ensure the image has 100px border-radius while maintaining 140x140px.
Check for unwanted margins or positioning conflicts causing layout shifts.
Alternatively, use Grid for centering if Flexbox doesn’t work as expected.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I change the text on a button to display a phone number on hover in Webflow without using images?

Does Webflow provide green hosting options to reduce CO2 emissions for websites?

How can I exclude specific pages in Webflow from appearing in our sitemap and analytics, such as auto-generated certificates given to visitors who completed a basic training on our website?

Is there a way to obtain the internal Webflow Page ID and internal Webflow Item ID within a Webflow page or using custom code or HTML embeds?

How can I set an active/current state for link blocks in Webflow when clicked on? I want to design a website similar to one I found, where the list state changes on scroll. Can someone assist me with this? Thank you.

How can I create a scrolling effect for a section with multiple company logos of varying widths in Webflow?

Can components be duplicated in Webflow to customize them without losing the original?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

Is it possible to make the logo slider in the retailer sections of my Webflow site continuously rotate smoothly from right to left instead of changing like a regular slider?

How can I add animated SVG icons, illustrations, and business logos to my website using Webflow?

Is it possible to create a Webflow button that, when clicked, opens a vCard information and allows visitors to save it on their smartphones?

Has anyone else experienced the issue where the background gradient on the "Body (All Pages)" tag in Webflow keeps repeating even after unchecking the 'repeat' checkbox?

How can I use an external database instead of Webflow for data on my real estate IDX search site, considering the high volume of listings and the need for quick delivery?

How can I properly insert the embed code of a Vimeo video into my Webflow site without the height being automatically set to 100%?

How can I undo the changes I made in Webflow when I accidentally deleted a section without backing it up and there is no option to undo or cancel the changes?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?