How to Centre a List in CSS?

Last Updated : 29 Jul, 2024

Lists are a common element in web design, used for navigation menus, item displays, and more. Centering a list in CSS can enhance the visual structure of a webpage, making it more aesthetically pleasing and user-friendly. There are multiple ways to achieve this, each using different CSS properties and techniques.

These are the following approaches to Centre a List in CSS:

Table of Content

Using Flexbox
Using CSS Grid

Using Flexbox

In this approach, we are using Flexbox to center the content both horizontally and vertically. The container div with the class center-flex is styled with display: flex, justify-content: center, and align-items: center, ensuring all content inside is centered. The flex-direction: column property stacks the items vertically, and the min-height: 100vh ensures the content takes up the full viewport height, centering it perfectly.

Example: The below example uses Flexbox to centre a list in CSS.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Example 1</title>
        <style>
            h1 {
                color: green;
            }
    
            .center-flex {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                flex-direction: column;
            }
    
            ul {
                list-style: none;
                padding: 0;
            }
    
            li {
                margin: 5px 0;
            }
        </style>
    </head>
    
    <body>
        <div class="center-flex">
            <h1>GeeksforGeeks</h1>
            <h3>Approach 1: Using Flexbox</h3>
            <ul>
                <li>Data Structures</li>
                <li>Algorithms</li>
                <li>Programming Languages</li>
                <li>Web Development</li>
                <li>Machine Learning</li>
            </ul>
        </div>
    </body>
</html>

Output:

Screenshot-2024-07-27-at-15-43-09-Center-List-with-Flexbox — Output

Using CSS Grid

In this approach, we are using CSS Grid to center the content both horizontally and vertically. The container div with the class center-grid is styled with display: grid and place-items: center, which aligns all child elements to the center of the grid container. The min-height: 100vh ensures the container takes up the full viewport height, and text-align: center centers the text within the list items.

Example: The below example uses CSS Grid to centre a list in CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 2</title>
    <style>
        h1 {
            color: green;
        }

        .center-grid {
            display: grid;
            place-items: center;
            text-align: center;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div class="center-grid">
        <h1>GeeksforGeeks</h1>
        <h3>Approach 2: Using CSS Grid</h3>
        <ul>
            <li>Data Structures</li>
            <li>Algorithms</li>
            <li>Programming Languages</li>
            <li>Web Development</li>
            <li>Machine Learning</li>
        </ul>
    </div>
</body>


</html>

Output:

Screenshot-2024-07-27-at-15-46-03-Example-2 — Output

How to Center a Table with CSS ?

anjalibo6rb0

Improve

Article Tags :

How to Centre a List in CSS?

Using Flexbox

Using CSS Grid

Similar Reads

Thank You!

What kind of Experience do you want to share?