Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / align an element of a div to the center
Ask Question

Align an element of a div to the center

Anonymous User 519 20 Jul 2021

How to center a div element vertically and horizontally?

css-css3 htmlcss-css3
Updated 20 Jul 2021
Anonymous User
Anonymous User

Software Developer Trainee

I am a content writter !

Message

1 Answers

Ethan Karla
Ethan Karla 21 Jul 2021
Report Abuse

You can easily an element of a div using display-flex property.

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Let's understand it with the help of an example : 

<!DOCTYPE html>

<html lang ='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <title>Flexbox</title>

    <style>

        body {

            margin-left: 30%;

            margin-right: 30%

        }

        .d-flex {

            display: flex;

        }

        .justify-content-center {

            justify-content: center;

        }

        #square {

            width: 100px;

            height: 100px;

            background : black;

        }

        .flex-column {

            flex-direction: column;

        }

        .align-items-center {

            align-items: center;

        }

    </style>

</head>

<body>

    <div class='d-flex justify-content-center flex-column align-items-center'>

        <h3>Flexbox Property</h3>

        <p>This paragraph and below square will be centered</p>

        <div id='square'></div>

    </div>

</body>

</html>

Hope this information will be helpful for you.

Happy Coding!

MindStick Training