margin: auto无法居中div但<center>标签可行，求纯CSS居中方案

Hey there! I see you got your div centered using the old <center> tag, but you’re right to aim for a pure CSS solution—<center> is actually deprecated in modern HTML, so CSS is the cleaner, standards-compliant way to go. Let’s break down why your margin: auto !important didn’t work first, then fix it.

Why margin: auto Failed #

Block-level elements like <div> default to taking up 100% of their parent’s width. When you set margin: auto, there’s no extra horizontal space left for the margins to push the div to the center. You need to give the div a defined width (or max-width) so the browser knows how much space to distribute as margins.

Solution 1: Horizontal Centering (Most Common) #

Add a width (or max-width for responsiveness) to your div, then use margin: 0 auto (top/bottom margin 0, left/right auto):

<div style="margin: 0 auto; width: 80%; max-width: 1000px;">
  <h1 style="color: yellow">Do you want to build a snowman?</h1>
  <div class="head"></div>
  <div class="eye1"></div>
  <div class="eye2"></div>
  <div class="nose"></div>
  <div class="mouth"></div>
  <div class="smile"></div>
  <div class="body"></div>
  <h2 style="color: yellow">yes?</h2>
</div>

• width: 80%: Makes the div take 80% of its parent’s width (adjust this to your needs—you could use a fixed pixel value like 600px too).
• max-width: 1000px: Prevents the div from getting too wide on large screens (great for responsive design).
• margin: 0 auto: Tells the browser to split the remaining horizontal space equally between left and right margins, centering the div.

Solution 2: Horizontal + Vertical Centering #

If you want the div centered both horizontally and vertically on the page, use Flexbox (modern, widely supported):

First, add styles to the parent element (usually <body>):

body {
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: center;     /* Vertical center */
  min-height: 100vh;       /* Make body take full viewport height */
  margin: 0;               /* Remove default body margin */
}

Then your div doesn’t need any margin styles—it will be centered automatically:

<div>
  <h1 style="color: yellow">Do you want to build a snowman?</h1>
  <!-- Rest of your content -->
</div>

Why Avoid <center>? #

The <center> tag was deprecated in HTML5 because it mixes presentation (style) with structure (HTML). Using CSS keeps your code organized, maintainable, and aligned with modern web standards.

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