Back to Blog Menu

How to Centering Element with CSS

Tips and Trick How to centering HTML elements using CSS

December 28, 2023 - 8 months ago

8 min read
Image cover blog How to Centering Element with CSS

Summary

There are some developers who still have a little difficulty in creating proportional layouts (with CSS) in development during the development period of the website project. But, don't worry, after reading this post you will definitely be able to improve your skills and knowledge in layout using CSS.

Centering Element Horizontally

Centering element horizontally with margin property

<div class="box center">
  BOX
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Layout Box */
.center: {
  margin: auto
}

Centering element horizontally with position property

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling wrapper */
.wrapper: {
  position: relative;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Layout Box */
.center: {
  position: absolute;
  left: 50%; /*  right: 50%; */
  transform: translateX(-50%) /*  translateX(50%) */
}

Centering element horizontally with flex-box

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Styling wrapper */
.wrapper: {
  display: flex;
  justify-content: center;
}

Centering element horizontally with grid

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Styling wrapper */
.wrapper: {
  display: grid;
  justify-items: center;
}

Centering Element vertically

Centering element vertically with position

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling wrapper */
.wrapper: {
  position: relative;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Layout Box */
.center: {
  position: absolute;
  top: 50%; /*  bottom: 50%; */
  transform: translateY(-50%) /*  translateY(50%) */
}

Centering element vertically with flex-box

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Styling wrapper */
.wrapper: {
   width: 13rem;
  height: 13rem;
  display: flex;
  align-items: center;
}

Centering element vertically with grid

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Styling wrapper */
.wrapper: {
   width: 13rem;
  height: 13rem;
  display: flex;
  align-items: center;
}

Centering element vertically with flex-box

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Styling wrapper */
.wrapper: {
   width: 13rem;
  height: 13rem;
  display: grid;
  align-items: center;
}

Centering Element (Horizontally and Vertically)

Centering element with position

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling wrapper */
.wrapper: {
  position: relative;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Layout Box */
.center: {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%)
}

Centering element with flex-box

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Styling wrapper */
.wrapper: {
   width: 13rem;
  height: 13rem;
  display: flex;
  align-items: center;
  justify-items: center;
}

Centering element with grid

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Styling wrapper */
.wrapper: {
   width: 13rem;
  height: 13rem;
  display: flex;
  align-items: center;
}

Centering element vertically with flex-box

<div class="wrapper">
  <div class="box center">
    BOX
  </div>
</div>
/*  Global Reset Layout CSS */

* : {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Styling Box */
.box: {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

/*  Styling wrapper */
.wrapper: {
   width: 13rem;
  height: 13rem;
  display: grid;
  place-items: center;
}
That's all I can share, thank you for reading this post, I hope it's useful and see you in the next post
Reference:

Tags

HTML
CSS