CodeGym /Java Course /Frontend SELF EN /Centering Elements

Centering Elements

Frontend SELF EN

Level 22 , Lesson 3

Available

9.1 Horizontal Centering

Centering elements on a web page is one of the basic tasks of web design. It allows you to create aesthetically pleasing and easily readable layouts. Below, we'll explore different methods for horizontal and vertical centering of elements using modern CSS techniques.

1. Centering block elements using margin: auto

One of the simplest ways to center block elements is by using margin: auto.

Example:

CSS

    
      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
        margin: 0 auto;
      }

HTML

    
      <div class="centered-box"></div>

Code Explanation:

margin: 0 auto;: sets automatic margins on the left and right, centering the element horizontally

2. Centering inline elements using text-align

To center inline or inline-block elements within a block element, you can use the text-align: center property.

Example:

CSS

    
      .container {
        text-align: center;
        background-color: #f1c40f;
        padding: 20px;
      }

      .inline-element {
        background-color: #e74c3c;
        display: inline-block;
        padding: 10px;
        color: white;
      }

HTML

    
      <div class="container">
        <div class="inline-element">Inline Element</div>
      </div>

Code Explanation:

text-align: center;: centers inline (or inline-block) elements within a block container

3. Centering elements using Flexbox

Flexbox provides a flexible and simple way to center elements both horizontally and vertically.

Example:

CSS

    
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #2ecc71;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }

HTML

    
      <div class="flex-container">
        <div class="centered-box"></div>
      </div>

Code Explanation:

display: flex;: sets the container as a Flexbox
justify-content: center;: centers the elements horizontally
align-items: center;: centers the elements vertically (we'll dive into this soon)

9.2 Vertical Centering

1. Centering using Flexbox

Flexbox offers a straightforward way to vertically center elements.

Example:

CSS

    
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #2ecc71;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }

HTML

    
      <div class="flex-container">
        <div class="centered-box"></div>
      </div>

Code Explanation:

align-items: center;: centers the elements vertically

2. Centering using CSS Grid

CSS Grid provides powerful capabilities for centering elements:

CSS

    
      .grid-container {
        display: grid;
        place-items: center;
        height: 100vh;
        background-color: #9b59b6;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }

HTML

    
      <div class="grid-container">
        <div class="centered-box"></div>
      </div>

Code Explanation:

display: grid;: sets the container as a CSS Grid
place-items: center;: centers the elements both horizontally and vertically

3. Vertical centering using absolute positioning and CSS transformation

Using absolute positioning and CSS transformation lets you center elements vertically.

Example:

CSS

    
      .container {
        position: relative;
        height: 100vh;
        background-color: #e74c3c;
      }

      .centered-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }

HTML

    
      <div class="container">
        <div class="centered-box"></div>
      </div>

Code Explanation:

position: absolute;: sets the element in absolute positioning relative to the container
top: 50%;, left: 50%;: shifts the element 50% from the top and left edges of the container
transform: translate(-50%, -50%);: moves the element by 50% of its width and height for centering

4. Vertical centering with table and cells

Using a table and cells for vertical centering of elements.

Example:

CSS

    
      .table-container {
        display: table;
        width: 100%;
        height: 100vh;
        background-color: #f39c12;
      }

      .table-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

      .centered-box {
        display: inline-block;
        background-color: #3498db;
        padding: 20px;
        color: white;
      }

HTML

    
      <div class="table-container">
      <div class="table-cell">
        <div class="centered-box">Centered Element</div>
      </div>
    </div>

Code Explanation:

.table-container: creates a container with the table display
.table-cell: creates a table cell with vertical alignment middle

Previous Previous lesson

Next Next lesson

Comments

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION