How to center a div with CSS ?

One of the difficult things new web developers face is to center a div.

<body>
<div class=”center”>?</div>
</body>

The two methods I am going to show you are:

flexbox
grid

Using flexbox

.center{
d…


This content originally appeared on DEV Community and was authored by Ankush Dogra

One of the difficult things new web developers face is to center a div.

<body>
 <div class="center">?</div>
</body>

The two methods I am going to show you are:

  1. flexbox
  2. grid

Using flexbox 

.center{
    display: flex;
    align-items: center;
    justify-content: center;
}
  • align-items: center will make div vertically center.
  • justify-content: center will make div horizontally center.

Using Grid 

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


This content originally appeared on DEV Community and was authored by Ankush Dogra


Print Share Comment Cite Upload Translate Updates
APA

Ankush Dogra | Sciencx (2021-04-12T07:53:08+00:00) How to center a div with CSS ?. Retrieved from https://www.scien.cx/2021/04/12/how-to-center-a-div-with-css/

MLA
" » How to center a div with CSS ?." Ankush Dogra | Sciencx - Monday April 12, 2021, https://www.scien.cx/2021/04/12/how-to-center-a-div-with-css/
HARVARD
Ankush Dogra | Sciencx Monday April 12, 2021 » How to center a div with CSS ?., viewed ,<https://www.scien.cx/2021/04/12/how-to-center-a-div-with-css/>
VANCOUVER
Ankush Dogra | Sciencx - » How to center a div with CSS ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/12/how-to-center-a-div-with-css/
CHICAGO
" » How to center a div with CSS ?." Ankush Dogra | Sciencx - Accessed . https://www.scien.cx/2021/04/12/how-to-center-a-div-with-css/
IEEE
" » How to center a div with CSS ?." Ankush Dogra | Sciencx [Online]. Available: https://www.scien.cx/2021/04/12/how-to-center-a-div-with-css/. [Accessed: ]
rf:citation
» How to center a div with CSS ? | Ankush Dogra | Sciencx | https://www.scien.cx/2021/04/12/how-to-center-a-div-with-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts