XQA
Back to Python
2026-04-115 min read

Center Images (Python Programming)

Learn Center Images (Python Programming) step by step with clear examples and exercises.

Why This Matters

Centering images is a crucial aspect of web design that can significantly enhance the visual appeal of your website or application. Centered images are easier to find on the page and contribute to a more organized and aesthetically pleasing layout. In this lesson, we will explore how to center images using HTML, CSS, and Python within a Flask application.

Prerequisites

To fully understand and follow along with this tutorial, you should have a basic understanding of the following topics:

  1. Python programming fundamentals
  2. HTML and CSS basics
  3. Flask web framework in Python
  4. Navigating your operating system (commands for creating directories, moving files, etc.)

Core Concept

To center an image using HTML, CSS, and Flask, follow these steps:

  1. Create a new Flask app and set up the necessary dependencies.
  2. In your templates folder, create a new HTML file (e.g., index.html) with the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center Image Example</title>
<!-- Add your custom CSS here -->
</head>
<body>
<div class="container">
<img src="/static/image.jpg" alt="Centered Image" class="centered-image">
</div>
<!-- Add any additional HTML content here -->
</body>
</html>

In the above example, we've created a basic HTML structure with a single ` element that will contain our centered image. We also added an alt attribute for accessibility and a custom class name (centered-image`) to target the image in our CSS.

  1. Create a new CSS file (e.g., styles.css) within your templates folder and add the following code:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}

.centered-image {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}

In this CSS, we've defined a class .container that uses the display: flex property to create a flexible container and sets both the justify-content and align-items properties to center its contents horizontally and vertically, respectively. We also set the height of the container to 100% of the viewport (100vh) and removed any default margins and padding. For the image, we've added some basic styling to maintain its aspect ratio when resized and centered it within the container using the margin: auto property.

  1. In your Flask app, register the CSS file and serve the static folder:
from flask import Flask, render_template

app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['TEMPLATE_FOLDER'] = 'templates'
app.config['STATIC_URL_PATH'] = '/static'

@app.route('/')
def home():
return render_template('index.html')

if __name__ == '__main__':
app.run(debug=True)

In the above example, we've registered our HTML template and configured Flask to automatically reload templates when changes are made, as well as specifying the location of our templates and static folders.

  1. Place your image (e.g., image.jpg) in a static folder within your application directory.

Now, if you run your Flask app and navigate to the root URL (http://localhost:5000), you should see your centered image displayed on the page.

Worked Example

Let's walk through a complete example of centering an image in a Flask application.

  1. Create a new directory for your project, e.g., center_image.
  2. Navigate to the project directory and create a virtual environment:
python3 -m venv env
source env/bin/activate
pip install flask
  1. Create a new Flask app with the necessary dependencies, save it as app.py:
from flask import Flask, render_template

app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True

@app.route('/')
def home():
return render_template('index.html')

if __name__ == '__main__':
app.run(debug=True)
  1. Create a new templates folder and add an index.html file with the structure provided earlier.
  2. Create a new CSS file (styles.css) within the templates folder and add the code for the .container and .centered-image classes as shown above.
  3. Create a static folder within your project directory and place an image (e.g., image.jpg) inside it.
  4. Run your Flask app:
python app.py
  1. Navigate to the root URL (http://localhost:5000) in your web browser, and you should see your centered image displayed on the page.

Common Mistakes

  1. Forgetting to link the CSS file in the Flask app configuration:
app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True
  1. Not using the correct class name for targeting the image in your CSS:
.container img {
/* Incorrect */
max-width: none;
height: auto;
}
  1. Failing to set the maximum width and height properties for the image, causing it to overflow its container:
.centered-image {
max-width: none;
height: auto;
display: block;
margin: auto;
}
  1. Not properly setting the height property of the .container class, which can result in improper centering:
.container {
display: flex;
justify-content: center;
align-items: center;
/* Incorrect */
height: 100%;
margin: 0;
padding: 0;
}

Practice Questions

  1. Modify the example provided to center an image with a custom class name (e.g., my-image) using CSS.
  2. Add additional HTML content below the centered image and ensure it is properly aligned using CSS.
  3. Create a Flask app that accepts user-uploaded images and displays them centered on the page.
  4. Modify the example to handle different aspect ratio images and maintain proper centering.

FAQ

  1. Why should I center images in my web application?

Centering images can improve the visual appeal of your website, making it more appealing to users. It also ensures that the image is properly aligned and easy to find on the page.

  1. How do I center an image using HTML, CSS, and Flask?

To center an image in a Flask application, create a flexible container (using display: flex) and set its justify-content and align-items properties to center its contents horizontally and vertically, respectively. Apply some basic styling to the image to maintain its aspect ratio when resized and centered it within the container using the margin: auto property.

  1. What are some common mistakes to avoid when centering images in Flask apps?

Common mistakes include forgetting to link the CSS file, not using the correct class name for targeting the image in your CSS, failing to set the maximum width and height properties for the image, and improperly setting the height property of the container.

  1. What is the purpose of the display: flex; property in centering images?

The display: flex; property makes an element a flexible container, allowing its children elements to be positioned relative to each other using properties like justify-content and align-items. In our case, we use it to center both the horizontal and vertical position of the image within the container.

Center Images (Python Programming) | Python | XQA Learn