极客笔记如何使用CSS将块元素居中
定位元素（如按钮、内容框、文本和图像）是对齐的主要内容。在网页设计中，对齐是将部分正确或成一直线排列的过程。在某些网页设计策略中，故意打破对齐以产生不对称的设计。另一方面，组件都会以某种方式对齐。
网页的布局在很大程度上由元素的位置确定。一个漂亮的网站是那些元素被有策略地放置和组织得好的网站。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>标签内创建块级元素。