How to center elements in a fixed position element

Question

I want to make a plus sign for adding notes for a notes-app. I made a circle that is position fixed, so that it is always visible. I want to then make two lines that make a plus-sign, and center these lines. This is the code:

#note-add {
  position: fixed;
  background: rgb(189, 28, 175);
  width: 75px;
  height: 75px;
  bottom: 0;
  right: 50%;
  border-radius: 50%;
  margin-bottom: 30px;
}

.lines {
  position: relative;
  background: red;
  width: 30px;
  height: 5px;
  margin: 5px 0px;
}

#line2 {
  transform: rotate(90deg);
}

<div id="note-add">
  <div class="lines" id="line1">

  </div>
  <div class="lines" id="line2">

  </div>
</div>

Please tell me how to do center the plus sign to the fixed-positioned circle. Thank You!

Check https://codepen.io/vickyparanjothi/pen/OJbeGaZ for solution — Vignesh PV, Mar 19 '21 at 14:45

score 2 · Accepted Answer · answered Mar 19 '21 at 14:40

No need for inner elements, you can use pseudo elements for this. For the centering, I use one of the most common and robust centering methods:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

along with a positioned parent.

Here's what it looks like:

.note-add {
  position: fixed;
  background: rgb(189, 28, 175);
  width: 75px;
  height: 75px;
  bottom: 0;
  right: 50%;
  border-radius: 50%;
  margin-bottom: 30px;
}

.note-add::before,
.note-add::after {
  content: "";
  position: absolute;
  background: red;
  width: 30px;
  height: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.note-add::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

<div class="note-add"></div>

How to center elements in a fixed position element

1 Answers1