All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Center A DIV CSS

Last Updated : Mar 11, 2024

How To Center A DIV CSS

In this article we will show you the solution of how to center a div css, to center a div using CSS, we will see two different methods. Let us know about the properties we are gonna use.

Transform:translate() : According to the X-axis and Y-axis arguments specified, the translate() method in CSS moves an element from its existing position.

Margin: to center a div we have to set the margin property to auto auto to horizontally and vertically center a div.

Step By Step Guide On How To Center A DIV CSS :-

Method 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> how to center a div css </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        body{
            background-color: rgb(51, 50, 50);
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        h1{
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
        h3{
            color : rgb(95, 194, 95) ;
            font-size: 20px;
        }
        .container{
            height: 200px;
            width: 200px;
            background-color: rebeccapurple;
            color: aliceblue;
            position: relative;
        }
        .content{
            height: 50%;
            width: 50%;
            background-color: blanchedalmond;
            color: black;
            position: absolute;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <center>
        <h1> TALKERSCODE </h1>
        <h3> how to center a div CSS </h3>
    </center>
    <div class="container">
        <div class="content">
            Center a div
        </div>
    </div>
</body>
</html>
  1. writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
  2. The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
  3. The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
  4. The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
  5. We'll use an external CSS file to style the HTML page.
  6. The <h1> element is used to add a heading, and the </h1> tag is used to close it.
  7. creating a <div> with the class of container. adding a new <div> of a class of content to it. We will center the content div into the container div.
  8. using <style> tag to add CSS
  9. now addressing the container class which is the outer div, setting the height and width, color, and background color to it. Also setting the Position to relative.
  10. Then into the content class, set the height and width to 50%. Add different colors and background colors. Set the Position to absolute. Now set the top and left to 50%. Lastly set the transform to translate(-50%, -50%).
  11. Now the content div is centered in the container div

Method 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> how to center a div CSS </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        body{
            background-color: rgb(51, 50, 50);
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        h1{
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
        h3{
            color : rgb(95, 194, 95) ;
            font-size: 20px;
        }
        div {
            height: 200px;
            width: 200px;
            border: 2px solid orange;
            color: lightcoral;
            overflow: scroll;
            margin: auto auto ;
        }
    </style>
</head>
<body>
    <center>
        <h1> TALKERSCODE </h1>
        <h3> how to center a div css </h3>
    </center>
    <div>
       <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ipsa assumenda maiores, quisquam ullam, perferendis eaque adipisci, saepe dolores distinctio fugit sapiente facere repellendus iure!
       </p>
    </div>
</body>
</html>
  1. writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
  2. The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
  3. The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
  4. The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
  5. We'll use an external CSS file to style the HTML page.
  6. The <h1> element is used to add a heading, and the </h1> tag is used to close it.
  7. Create a <div> and write some paragraph within <p> tag
  8. using <style> tag to add CSS
  9. at first specify height and weight to the div. then adding a border to the div and also the color of the text. Set the overflow to scroll
  10. now to center the div, set the margin to auto auto.

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know How to center div in CSS.

I hope this article on how to center a div css helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪