How do I center a third party affiliate code widget in my Webflow page?

To center a third-party affiliate code widget in your Webflow page, you can follow these steps:

1. Add a Div Block: In Webflow's Designer interface, identify the section or container where you want to place the widget. Drag and drop a Div Block element onto the desired location in your page structure.

2. Set the Display and Position Properties: With the Div Block selected, go to the Styles panel on the right sidebar. Under the Display section, set the Display property to "Flex" to enable flexbox layout for the container. This will allow you to easily center the widget. Additionally, set the Position property to "Relative".

3. Adjust Flexbox Properties: Within the Flexbox section of the Styles panel, you can make use of the justify-content and align-items properties to center the widget both horizontally and vertically.

- To center the widget horizontally, set the justify-content property to "center". This will align the widget in the center of the container along the main axis.
- To center the widget vertically, set the align-items property to "center". This will vertically center the widget along the cross axis. Note: If the height of the container is not explicitly set, you may need to adjust the height for this to take effect.

4. Insert the Affiliate Code: Now, you can insert your third-party affiliate code widget inside the Div Block. Select the Div Block and go to the CMS & Embed section on the right sidebar. Choose the Embed element and paste the code snippet provided by your affiliate program. The widget should now be centered within the container.

5. Adjust Styling as Needed: You can further customize the appearance of the container and the widget by applying additional styles such as background color, padding, or borders. Use the Styles panel to modify these properties to match your website's design.

6. Preview and Publish: Before publishing, make sure to preview your page in different viewports to ensure the centered widget looks visually appealing and responsive across different devices. Once you're satisfied, publish your Webflow site to make the changes live.

By following these steps, you should be able to center your third-party affiliate code widget within your Webflow page using flexbox and maintain proper alignment as the page adapts to different screen sizes.