如何实现整个main元素的居中？

嘿，其实你已经找对路子啦！要让整个main元素水平居中，核心就是给它设置固定宽度，再加上margin: 0 auto这个样式就行。

原理很简单：当块级元素有明确的宽度时，把左右外边距设为auto，浏览器就会自动分配左右的空白空间，刚好让元素在父容器里水平居中。

给你看看完整的代码示例：

HTML代码 #

<main>
  <h1>My main content</h1>
  <form action="/action_page.php" id="form">
    <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
    <input type="submit" value="Submit">
  </form> 
</main>

CSS代码 #

main {
    width: 800px;
    margin: 0 auto;
}

要是你还想实现垂直方向的居中，那可以给父容器（比如body）加上flex布局样式，但如果只是需要水平居中的话，上面的方法就完全够用啦～

备注：内容来源于stack exchange，提问作者user9026