CSS Layout Tips: How to Implement Horizontally and Vertically Centered Web Elements

CSS Layout Tips: How to Achieve Horizontally and Vertically Centered Web Elements

In web design and development, achieving horizontal and vertical centering of elements is a frequently encountered problem. . Whether it is to center a picture, a text box, or a centered layout of the entire page, the correct use of CSS layout techniques can easily achieve this effect. This article will introduce some common CSS methods to achieve horizontal and vertical centering, and provide specific code examples.

1. Text content of centered elements

1. Centering of inline elements
   If you want to center the text content of an inline element horizontally, you can use text-align and line -height attribute, as shown below:

.container {
  text-align: center;
  line-height: 200px;
}

Among them, container is the container element containing text content, and the value of the line-height attribute is set to the height of the container, so that the text content will be in the vertical direction Display centered.

2. Centering of block-level elements
   For block-level elements, you can achieve horizontal centering by setting the width and automatic margins, and then use the text-align attribute to center the text content. The specific code is as follows:

.container {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

Among them, container is a container containing block-level elements, set the width to a fixed value, and set the left and right margins to "auto" to achieve horizontal centering. Then use the text-align attribute to center the text content.

2. The entire content of the centered element

1. Absolute positioning and negative margin method
   When the width and height of the element are known, absolute positioning and negative margins can be used Margins are used to center the entire element horizontally and vertically in the parent container. The specific code is as follows:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

Among them, parent is the parent container and child is the child element. By setting the position attribute of the child element to absolute, and then using the top and left attributes to position the child element relative to the parent container Centered horizontally and vertically. By setting the width, height and negative margins of the child element, you can ensure that the child element is centered in the parent container.

2. Flexbox layout method
   Flexbox is a layout mode introduced in CSS3, which can easily achieve horizontal and vertical centering of elements. The specific code is as follows:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Among them, container is a container containing elements. By setting the display attribute of the container to flex, and then using the justify-content and align-items attributes, the horizontal and vertical elements can be realized. Centered.

3. Center the layout of the entire page

To achieve a centered layout of the entire page, you can use absolute positioning and negative margins. The specific code is as follows:

html, body {
  height: 100%;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
}

Among them, set the height of html and body elements to 100% to ensure that the height of the entire page is 100%. Then, set the center position of the element relative to the browser window by setting the position attribute of the .container element to absolute, and then using the top and left attributes. Finally, the element is moved horizontally and vertically through the translate function of the transform attribute to achieve a centered layout of the entire page.

This article introduces several commonly used CSS layout techniques, which can easily achieve horizontal and vertical centering of web page elements. Different methods are suitable for different scenarios, and developers can choose the most appropriate method to achieve the centering effect according to actual needs. I hope this article will help you with centered layout in web design and development!

The above is the detailed content of CSS Layout Tips: How to Implement Horizontally and Vertically Centered Web Elements. For more information, please follow other related articles on the PHP Chinese website!