Question 245511 in Html Question posted in
Some basic documentation can be found here.

Html – How can I center a div horizontally in CSS

I'm currently working on a webpage, and one of the challenges I'm facing is centered horizontally a specific div on the screen. Despite my efforts, I haven't been able to achieve this as expected. Here's the HTML and CSS code I'm currently using:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
  <div class="mi-div">
    <p>Contenido del div</p>
  </div>
</body>
</html>



/* estilos.css */
.mi-div {
  width: 300px;
  /* this is the width*/
  height: 200px;
 /* this is the height*/
  background-color: lightgray;
 /* I assign is a background*/

 /* Here's where I've attempted to center this div horizontally, but it hasn't worked so far. */
/* How can I center this div horizontally? */
}

I've explored various methods, including using 

/* this is css code*/
margin: 0 auto;

and

/* this is css code*/

text-align: center;

` but none of them seem to be achieving the desired centering effect.

Could someone kindly provide a step-by-step guide or an alternative approach to achieve horizontal centering for this div? I would greatly appreciate any help or insights.
`

Tags:

3

Answers


  1. 0

    To center the div you can check below code:

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="estilos.css">
  <style>
    body {
      display: flex;
      justify-content: center; /* Center the content horizontally */
      align-items: center; /* Center the content vertically */
      height: 100vh; /* Set the body's height to the viewport height for vertical centring */
    }
  </style>
</head>
<body>
  <div class="mi-div">
    <p>Contenido del div</p>
  </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    You can use either flex-box or grid layout to make an element center

    I have used body to make center, instead you can warp into a another parent div and apply the same css.

    body {
  display:grid;
  place-items:center;
}

.mi-div {
  width: 300px;
  /* this is the width*/
  height: 200px;
 /* this is the height*/
  background-color: lightgray;
}
    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
  <div class="mi-div">
    <p>Contenido del div</p>
  </div>
</body>
</html>
    Login or Signup to reply.
  3. 0

    Currently CSS layout is normally configured by flexbox (one dimension, horizontal or vertical) or grid (two dimensions). You need to modify the CSS like

    .mi-div {
  display: flex; /* specify flexbox */
  align-items: center; /* center vertically */
  justify-content: space-around; /* "simulate" centering horizontally */
  width: 300px;
  height: 200px;
  background-color: lightgray;
}

    .mi-div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 300px;
  height: 200px;
  background-color: lightgray;
}
    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
  <div class="mi-div">
    <div>Contenido del div</div>
  </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search