How to achieve the sub-box centering vertically with the text position unchanged in CSS transparent parent box?

In CSS layout, how to achieve the parent box having transparency and containing text, while allowing the child box to be vertically centered within the parent box and keep the text position unchanged? This is a common CSS layout problem. This article will explain in detail how to solve this problem and provide specific CSS code examples.

The core of the problem lies in how to center the child box vertically without affecting the text content in the parent box when the parent box is set to transparency (opacity: 0.2). Using the opacity attribute directly causes the child elements to inherit transparency, which is contrary to our needs.

The key to the solution is to use absolute positioning and transform: translateY(-50%). First, we need to set the child element to absolute position (position: absolute), so that it is separated from the document stream and can be positioned according to the parent element. Then, set top: 50% to move the top of the child element to half the height of the parent element, and then use transform: translateY(-50%) to move the child element upwards by half of its height, thereby achieving vertical centering.

As for the transparency of the parent element, we should not use the opacity attribute because it affects the transparency of all child elements. Instead, the background color of the parent element should be set using the rgba() color value, such as background-color: rgba(255, 255, 255, 0.2); This will achieve the transparency of the parent element without affecting the transparency of the child element.

Therefore, the final CSS code should be similar to the following structure (the specific style needs to be adjusted according to the actual situation):

.parent {
  position: relative; /* The parent element needs to be set to relative positioning*/
  background-color: rgba(255, 255, 255, 0.2); /* Use rgba to set transparency*/
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* vertical and horizontal center*/
}

Through the above method, the vertical centering effect of the child box can be achieved while ensuring the transparency of the parent box and the text position remain unchanged. Remember, adjusting the left attribute can achieve horizontal centering, and transform: translate(-50%, -50%) can achieve horizontal and vertical centering at the same time.

The above is the detailed content of How to achieve the sub-box centering vertically with the text position unchanged in CSS transparent parent box?. For more information, please follow other related articles on the PHP Chinese website!