如何使网站水平居中？

要使用 CSS 水平居中你的网站，请设置一个 div，网站的所有内容都将设置在那里。以一种使其水平居中的方式对其进行对齐。为此，我们将使用 **margin** 和 **max-width** 属性。

设置网站的 Main div

设置一个 div，并在其中添加一些元素，使其看起来像示例网站 -

<div class="main">
   <h1>Center website horizontally example</h1>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad nemo, nisi fugiat dolores 
   quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero, 
   quis non quidem eaque eligendi iusto numquam, optio magni corrupti, eum ad. </p>
</div>

设置 div 的样式以使其水平居中

我们将设置上述 div main 的样式，并使用值为 **auto** 的 **margin** 属性。**max-width** 也用于设置 main div 的最大宽度 -

.main {
   max-width: 600px;
   margin: auto;
   background: rgb(70, 32, 240);
   color: white;
   padding: 10px;
}

示例

让我们看一个示例 -

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
      body {
         background: rgb(255, 238, 0);
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .main {
         max-width: 600px;
         margin: auto;
         background: rgb(70, 32, 240);
         color: white;
         padding: 10px;
      }
      p {
         font-size: 30px;
         font-weight: lighter;
      }
   </style>
</head>
<body>
   <div class="main">
      <h1>Center a website horizontally example</h1>
      <p>This is a demo paragraph. Ad nemo, nisi fugiat dolores 
      quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero, 
      quis non quidem eaque eligendi iusto numquam, optio magni corrupti, eum ad. </p>
   </div>
</body>
</html>

更新于： 16-11-2023

162 浏览

开启您的 职业生涯

通过完成课程获得认证

开始
广告