如何使用 CSS 将块元素居中?

cssweb developmentfront end technology更新于 2025/1/13 19:24:17

对齐的关键在于定位元素，例如按钮、内容框、文本和图片。在网页设计中，对齐是指将元素的各个部分正确排列或排列成一条直线。在某些网页设计策略中，会故意破坏对齐方式，以产生不对称的设计。另一方面，所有组件都会以某种方式对齐。

网页的布局很大程度上由元素的位置决定。一个美观的网站应该包含经过精心设计且井然有序的元素。CSS 的position属性可以简化这一过程。它有助于创建各种网站布局。如果各个部分对齐得当，您的网站将更易于阅读。对象和信息的正确对齐对网站的整体外观有着显著的影响。您的网站元素(包括文本块和照片占位符)的精心对齐，不仅彰显专业性，而且美观且宁静祥和。

响应式设计的一个重要组成部分是网站元素的对齐。这是因为当网站从屏幕较小的设备(例如智能手机)加载时，其外观和结构将根据预期发生变化。在本文中，我们将讨论如何使用 CSS 对齐块元素。

什么是块元素?

块元素是显示在新行开头的元素。块元素占据其所属内容的整个宽度。与内联元素不同，这些元素具有顶部和底部边距。只有 body 标签允许包含块级组件。与内联组件相比，块级元素会生成更大的结构。块元素的示例有 <div>、<article>、<section>、<li>、<ul>、<form>、<p> 等，

示例

<!DOCTYPE html>
<html>
<head>
   <title> Block Elements </title>
   <style>
      *{
         margin: 11px;
         padding: 5px;
         letter-spacing: 1px;
      }
      h1{
         color: green;
         text-decoration: underline;
      }
      div{
         background-color: #FFFF00;
         width: 30%;
      }
      p{
         background-color: #FF0000;
         width: 30%;
      }
      article{
         background-color: #00FF00;
         width: 30%;
      }
      section{
         background-color: blue;
         width: 30%;
      }
   </style>
</head>
<body>
   <h2> Block Elements </h2>
   <div> This is a div element. </div>
   <p> This is a p element. </p>
   <article> This is an article element. </article>
   <section> This is a section element. </section>
</body>
</html>

块级元素居中对齐的方法

下面讨论一些块级元素居中对齐的方法。

方法 1

手动指定元素的宽度。这是因为块级元素的默认宽度是整个屏幕的 100%。然后，指定用于对齐块级元素周围剩余空间的边距。

示例

<!DOCTYPE html>
<html>
<head>
   <title> Alignment of Block elements </title>
   <style>
      *{
         margin: 11px;
         padding: 5px;
         box-sizing: border-box;
      }
      body {
         background: cyan;
      }
      .container {
         background: #000000;
         color: #FFFFFF;
         text-align: center;
         width: 350px;
         margin: 10rem auto;
      }
   </style>
</head>
<body>
   <h1> Tutorialspoint </h1>
   <h2> Block Elements </h2>
   <div class= "container">
      <h3> This is a div element which is centrally aligned. </h3>
   </div>
</body>
</html>

示例

<!DOCTYPE html>
<html>
<head>
   <title> Alignment of Block elements </title>
   <style>
      *{
         margin: 11px;
         padding: 2px;
         box-sizing: border-box;
      }
      body {
         background: #FFFF00;
      }
      .box {
         background: #040220;
         color: rgb(238, 238, 238);
         text-align: center;
         width: 480px;
         height: 30px;
         margin: 10px auto;
      }
   </style>
</head>
<body>
   <h1> Tutorialspoint </h1>
   <h2> Block Elements </h2>
   <div class= "box">
      <h3> This is an example. </h3>
   </div>
   <div class= "box">
      <h3> This is an example. </h3>
   </div>
</body>
</html>

方法 2

要使块元素居中对齐，我们可以简单地使用 <center> 标签。<center> 标签内的所有元素都将居中对齐。

示例

<!DOCTYPE html>
<html>
<head>
   <title> Alignment of Block elements </title>
   <style>
      *{
         margin: 11px;
         padding: 5px;
         box-sizing: border-box;
      }
      body {
         background: cyan;
      }
      .container {
         background: #000000;
         color: #FFFFFF;
         text-align: center;
         width: 60%;
      }
   </style>
</head>
<body>
   <h1> Tutorialspoint </h1>
   <h2> Block Elements </h2>
   <h2> div element </h2>
   <center>
      <div class= "container">
         <h3> This is a div element which is centrally aligned. </h3>
      </div>
   </center>
   <h2> section element </h2>
   <center>
      <div class= "container">
         <h3> This is a section element which is centrally aligned. </h3>
      </div>
   </center>
</body>
</html>

结论

简洁的网页设计将极大地提升用户体验。如果用户在访问您的网站时拥有良好的体验，他们更有可能与您互动。简洁的页面也更容易阅读和发现信息。如果您的页面难以理解，人们就会访问竞争对手的网站。您希望访问者一进入您的网站就采取行动。这不应该是背道而驰的。在本文中，我们讨论了两种居中对齐块级元素的方法。一种方法是指定元素的外部宽度和边距，另一种方法是在 <center> 标签内创建块级元素。