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

How to Center a Div in HTML and CSS?

Center div in HTML, and CSS???

center a div element in html without using flex-box?
could anyone of you center a div without using flex-box? and grid system?
How to center a div element?
centering a div element in html and css?

Tags:

2

Answers


  1. 0

    without using flex-box, you can use CSS positioning. One common method is to use the position: absolute and transform properties along with top, left, right, and bottom values.

    <style>
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: lightgray;
    padding: 20px;
  }
</style>

<div class="centered">
  <p>This div is centered without using flex-box.</p>
</div>
    Login or Signup to reply.
  2. 0

    We can use margin, padding and position to center a div element.

    HTML :

    <div class="horizontal">
 <p>This div is centered without using flex-box.</p>
</div>

    To Center a div element Horizontally :

    .horizontal {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

    To Center a div element Vertically:

    .vertical{
  padding: 70px 0;
  border: 3px solid green;
}

    To Center a div element both Horizontally and Vertically:

    .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid green;
    padding: 10px;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search