How to center an element horizontally and vertically (Circle inside a rectangle)

Question

I am trying to create rectangular button with a circle and right arrow inside it. I have tried few things but couldn't get them centered. Also this were using top and bottom properties of the page whereas I want them to be independent of the page properties and center them with respect to rectangle. Below is the code I am using.

.rectangle {
  box-sizing: border-box;
  display: inline-block;
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: relative;
  padding-box;
  background: lightgreen;
  opacity: 1;
}

.rectangle:before {
  content: '';
  border-radius: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: lightseagreen;
  box-shadow: 0px 2px 48px #00000029;
  opacity: 1;
}

.rectangle:after {
  content: '';
  display: inline-block;
  margin-top: 1.05em;
  margin-left: 1.05em;
  width: 23px;
  height: 23px;
  border-top: 4px solid #333;
  border-right: 4px solid #333;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="rectangle"></div>

Could you please also provide the html code that is relevant. Preferably in a Code Snippet as well so it can be executed within the site. — ConnerWithAnE, Dec 09 '21 at 21:46

score 0 · Accepted Answer · answered Dec 09 '21 at 22:11

A couple of observations.

If you want to center an element then placing it in the center of its parent and then translating it by minus half its width and height works. This is what you are doing in the Y direction with the circle, but you have omitted to do it in the X direction.

We need to do more or less the same for the arrow but to get it centered you need to move it another 25% back to the left as it's not the center of the element you are interested in but the center of the rotated right hand part. Also note that the order of doing the transforms matters here as we have a rotation to include.

.rectangle {
    box-sizing: border-box;
    display: inline-block;
    width: 200px;
    height:100px;
    border:1px solid #ccc;
    border-radius: 5px;
    position: relative;
    padding-box;
    background: lightgreen;
    opacity: 1;
}

.rectangle::before {
    content: '';
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background:lightseagreen;
    box-shadow: 0px 2px 48px #00000029;
    opacity: 1;
}
      
.rectangle::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 23px;
    height: 23px;
    border-top: 4px solid #333;
    border-right: 4px solid #333;
    top: 50%;
    left: 50%;
    transform: translate(-75%, -50%) rotate(45deg) ;
    box-sizing: border-box;    
}

<div class="rectangle"></div>

Thank you for the explanation Haworth. – Deadpool_er Dec 09 '21 at 23:27 — Deadpool_er, Dec 09 '21 at 23:27

How to center an element horizontally and vertically (Circle inside a rectangle)

1 Answers1