要同時(shí)水平和垂直居中元素，最常用的方法包括使用Flexbox、Grid和絕對(duì)定位配合transform。 1. 使用Flexbox：設(shè)置容器為flex佈局，並通過justify-content和align-items設(shè)為center，適用於現(xiàn)代瀏覽器且簡(jiǎn)單高效；2. 使用Grid：通過display: grid和place-items: center實(shí)現(xiàn)一行居中，簡(jiǎn)潔明了；3. 絕對(duì)定位加transform：適合舊版瀏覽器，通過left和top設(shè)為50%並用transform回移自身寬高的一半實(shí)現(xiàn)居中，常用於彈窗或提示框等場(chǎng)景。

Centering an element both horizontally and vertically in CSS can be done in a few different ways, depending on your layout needs and browser support requirements. Below are some of the most common and reliable methods.

Using Flexbox (Modern and Simple)

Flexbox was designed specifically for aligning elements, and it makes centering a breeze.

How to do it:

 .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Ensures there's vertical space to center in */
}

This works great when you're centering a single item or multiple items inside a container. It respects padding and handles dynamic content well.

• justify-content: center centers horizontally.
• align-items: center centers vertically.

Just wrap your target element in a container with these styles, and you're done.

Using Grid (Another Modern Option)

CSS Grid also offers a very clean way to center things:

 .container {
  display: grid;
  place-items: center;
  height: 100vh;
}

This shorthand sets both alignment properties at once — horizontal and vertical centering in one line. It's concise and readable.

Absolute Positioning with Transform (Older Browsers Friendly)

If you need to support older browsers that don't fully support Flexbox or Grid, this method is still solid:

 .centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

This positions the element so its top-left corner is in the center of the parent, then pulls it back by half its width and height using the transform property.

• Works even if the parent isn't a fixed size.
• Good for overlays, modals, tooltips, etc.

Text Alignment vs. Element Centering

Keep in mind that just using text-align: center only affects inline content like text or inline elements. If you want to center a block-level element like a <div> or a <code><section></section> , you'll usually need to combine it with other techniques, or better yet, use Flexbox or Grid.

Also, remember that vertical centering is trickier than horizontal — which is why tools like Flexbox were created in the first place.

In short, Flexbox is usually the best bet unless you have specific constraints. But it's good to know a couple of options so you can pick what fits your project best.