Cornelius Emase
Simple Technique to Center a Div/Element

Simple Technique to Center a Div/Element

Easiest way of centering elements with margin and FlexBox

Cornelius Lochipi Emase's photo
Cornelius Lochipi Emase
·

4 min read

Table of contents

Introduction

Most often you will hear other devs saying they hate CSS, centering a div / and or an element has been a challenge to them. Well, in this article we will discuss with examples a few easiest ways to center an element.

You would probably not want to waste your time every time googling how to center an element, and have a cup of coffee and code your favorite programming language huh!

Let's get into it.

Terms

There are always two display values;

Block elements

Block elements start a new line and take up the full with available on the web page and create a new line after the element.

Examples of block elements include headings, paragraphs, lists, and divs.

Inline elements

Inline elements take up as much width as necessary and do not create a new line after an element.

Examples include links, images, and the span element.

Block elements have a default margin and padding, while inline elements do not.

Margin

It refers to the amount of space around an element.

Centering a button

Given a button element below to center to center, we need to remember a button is an inline element.

<button class="btn">Learn Css</button>

The provided code includes the declaration of a class named "btn" which can be customized through styling at a later time.

Our objective is to horizontally align a button, and to achieve this we must specify that it should be a block element, occupying the entire width.

.btn{
    display: block;   /*we define our element to be blocked*/
    margin: 0 auto;
    margin-top: 30px;
    background: #dfe1e5;
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

In the above code, we set the margin left and right to auto, this specifies that the margin takes up the remaining space on the right and left sharing its halves on each side.

And here we go 👇🏽

Retoric Question?

How is the element supposed to be centered if it doesn't take up the full width of the page? Well, you need to make sure that your element is block scoped.

Center an Image

To make an image appear in the center, you can change its properties by making it a block element and setting the left and right margins to auto.

    <main>
        <img src="svelte.jpg" alt="sveltelogo">
    </main>

img{
    display: block;
    width: 400px;
    margin: 2em auto;
    border-radius: 8px;
}

Centering elements using Flexbox

Example

Assuming we have two buttons that require centering, we can achieve this by applying the CSS display: flex property to the container that holds the buttons.

<div class="explore--btns">
   <button class="btn">Learn CSS</button>
   <button class="btn">Learn FlexBox</button>
</div>

.explore--btns{
    display: flex;
    justify-content: center;
}

.btn{
    margin: 3em 1em 0 1em;
    background: #dfe1e5;
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

In the above assigning a class ".explore--btns" a property display to flex makes our elements(buttons) flexible. The justify-content aligns our elements at the center horizontally.

Center vertically, FlexBox

The align-items property specifies the default alignment for items inside a flexbox or grid container.

The flex items are aligned on the cross-axis, which is vertical by default. Property values include center, flex-start, flex-end, start, end, stretch ...

Using the example discussed above, let's center our elements vertically using align-items

.explore--btns{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

We've set the align-items property value to center. The justify-content property set to center allows horizontal alignment of elements and their position at the center of the page.

Things to consider and take note of:

Upon observation, it appears that utilizing the margin method for centering elements has certain conditional restrictions, such as:

  1. The elements need to be displayed block

  2. Must have a width (optional in some cases)

  3. The margin-left and the right side is set to auto

FlexBox

Note it's important to keep in mind that we should define the height of the container holding the items beforehand.

Resources

Check out more on Scrimba, w3schools.

Wrap up

To sum it up, knowing how to use these elements effectively can help create a clean and readable layout for a web page. Centering elements in CSS can be a challenging task, but it is an essential skill for developers working on modern websites and can help create a clean and readable layout for a web page. Whether it's horizontally or vertically centering, various techniques and properties can be used, including margin, padding, transform, and flexbox. Depending on the type of content being centered and the design requirements, different methods may be more effective.

Thank you for reading! Follow for more!

hashnodebootcampWeb DevelopmentCSS3css flexbox