如何将加号图标居中于固定定位的圆形元素（笔记应用开发场景）

I'm building a plus button for adding notes in my note-taking app. I've created a fixed-position circular element that stays visible at all times. Now I need to create the two lines that make up the plus sign and center them perfectly inside the circle. Here's my current 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>

Can someone show me how to center the plus sign inside this fixed circular element? Thanks for your help!

Great question! Centering the plus sign is straightforward once you use a modern layout method like Flexbox, Grid, or precise absolute positioning. Let's go through the easiest and most maintainable options:

Option 1: Use Flexbox (Simplest Approach) #

Flexbox is perfect for centering content both horizontally and vertically with minimal code. Just update your #note-add styles to enable flex layout, then align and justify the content:

#note-add { 
  position: fixed; 
  background: rgb(189, 28, 175); 
  width: 75px; 
  height: 75px; 
  bottom: 0; 
  right: 50%; 
  border-radius: 50%; 
  margin-bottom: 30px;
  /* Add these flex properties to center content */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
} 
.lines { 
  background: red; 
  width: 30px; 
  height: 5px;
  /* Remove unnecessary margin and position rules */
} 
#line2 { 
  transform: rotate(90deg);
  /* Fix vertical gap caused by the line's height after rotation */
  margin-top: -5px;
} 

Why this works: #

• display: flex turns the circular button into a flex container
• flex-direction: column stacks the two lines vertically (ideal for the plus sign shape)
• align-items: center centers the lines horizontally within the circle
• justify-content: center centers them vertically
• The margin-top: -5px on #line2 eliminates the extra space created by the line's height when rotated.

Option 2: Use Grid (Even More Concise) #

Grid is another excellent choice—you can center the entire plus sign with just a couple of lines, and it gives you precise control over the sign's container.

First, wrap your two lines in a container div to simplify alignment:

<div id="note-add"> 
  <div class="plus-container">
    <div class="lines" id="line1"> </div> 
    <div class="lines" id="line2"> </div> 
  </div>
</div>

Then update the CSS:

#note-add { 
  position: fixed; 
  background: rgb(189, 28, 175); 
  width: 75px; 
  height: 75px; 
  bottom: 0; 
  right: 50%; 
  border-radius: 50%; 
  margin-bottom: 30px;
  /* Grid property to center the plus container */
  display: grid;
  place-items: center;
} 
.plus-container {
  position: relative;
  width: 30px;
  height: 30px;
}
.lines { 
  position: absolute;
  background: red; 
  width: 30px; 
  height: 5px;
  /* Center each line within the plus container */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 
#line2 { 
  /* Combine translation and rotation to keep the line centered */
  transform: translate(-50%, -50%) rotate(90deg);
} 

Why this works: #

• display: grid + place-items: center instantly centers the .plus-container inside the circle
• Absolute positioning on the lines ensures they overlap exactly in the center of their container, creating a clean plus sign.

Option 3: Absolute Positioning (Legacy Browser Support) #

If you need to support older browsers that don't handle Flexbox or Grid well, absolute positioning is a reliable fallback:

#note-add { 
  position: fixed; 
  background: rgb(189, 28, 175); 
  width: 75px; 
  height: 75px; 
  bottom: 0; 
  right: 50%; 
  border-radius: 50%; 
  margin-bottom: 30px;
  /* Make the circle a positioning context for the lines */
  position: relative;
} 
.lines { 
  position: absolute;
  background: red; 
  width: 30px; 
  height: 5px;
  /* Position lines 50% from top and left, then shift back by half their size */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 
#line2 { 
  transform: translate(-50%, -50%) rotate(90deg);
} 

This method works by placing each line at the circle's midpoint, then using translate(-50%, -50%) to pull the line back by half its own width and height—guaranteeing perfect centering.

All three methods will give you a crisp, centered plus sign. I recommend Flexbox for its simplicity and readability, unless you need the granular control that Grid or absolute positioning provides.

内容的提问来源于stack exchange，提问作者GreatCoder