How To Center An Image In Webflow

Quick summary

Centering an image in Webflow requires wrapping it in a Div Block and applying Flexbox alignment, since display properties cannot be set directly on image elements. This step-by-step walkthrough shows you exactly how to configure the Layout and Size settings in Webflow's right sidebar to achieve perfect horizontal and vertical centering.

Steps

1. Add a Div Block container element to your canvas to hold your image, so you can apply layout properties to the parent instead of the image directly.
2. Drop the Div Block at your desired location on the page.
3. Add your image inside the Div Block.
4. Observe that the image fills the Div with no customization yet, and note that some display properties cannot be applied to images directly — which is why the Div Block wrapper is needed.
5. Use the Navigator in the left sidebar to select the Div Block containing your image.
6. In the right sidebar, expand the Size section.
7. Set the Div Block width to 100% for full width, or enter your preferred custom value.
8. Notice the Div has expanded, creating space to position the image inside it.
9. Under the Layout tab in the right sidebar, select Flex as the display type to enable Flexbox alignment.
10. Use the position control box or the XY axes options to set the child image position — click the center point to align the image to the center of the parent Div Block.
11. Note that for most layouts, both the X axis and Y axis centering options will apply — adjust as needed for your specific design.
12. Your image is now centered in Webflow using Flexbox on the parent Div Block.