在构建网站时将图片，文字和块元素居中
如果您正在学习如何构建网站 ，您需要掌握的最常用的技巧之一是如何将项目放在浏览器窗口中。 这可能意味着将图像置于页面中心，或者可能将标题中心化为文本，如标题作为设计的一部分。
通过使用层叠样式表（CSS） ，完成居中图像或文本或甚至整个网页的视觉外观的正确方法。 大多数用于居中的属性都是在1.0版本以后的CSS中使用的，并且它们在CSS3和现代Web浏览器中运行良好 。
像网页设计的许多方面一样，有多种方式可以使用CSS来将网页中的元素居中。 让我们来看看使用CSS实现这种视觉效果的一些不同方式。
关于在HTML中使用CSS来居中元素的概述
以CSS为中心对于网页设计师来说可能是一个挑战，因为有很多不同的方法来完成这一个视觉风格。 虽然各种各样的方法可能是好的或经验丰富的网络开发人员，他们知道并非所有技术都适用于每一个元素，但对于较新的网络专业人员来说，这可能是非常具有挑战性的，因为各种各样的方法意味着他们需要知道何时使用哪种方法。 最好的办法是了解一些方法。 当您开始使用它们时，您将了解哪种方法在哪些情况下效果最好。
在较高的层面上，您可以使用CSS来：
- 中心文字
- 居中块级元素（如分区）
- 居中图像
- 垂直居中块或图像
很多（很多年前），网页设计师可以使用
用CSS居中文本
以网页为中心的最简单的事情就是文字。 您只需要知道一个样式属性即可：text-align。 以下面的CSS样式为例：
p.center {text-align：center; }
通过这一行CSS，每个用中心类书写的段落将在其父元素内水平居中。 例如，如果段落在一个分区内，意味着它是该分区的一个子分区，它将水平居中放置在
下面是在HTML文档中应用的这个类的一个例子：
这段文字居中。
当使用text-align属性居中文本时，请记住它将在其包含元素中居中，而不一定居中于整个页面本身。 还要记住，对于大块内容，居中对齐的文本可能很难阅读，所以请谨慎使用此样式。 标题和小块文本（如文章或其他内容的传情文本）在居中时通常易于阅读和良好处理，但如果内容完全居中，则较大的文本块（如整篇文章本身）将难以消费有道理的。 请记住， 可读性始终是网站文本的关键 ！
用CSS集中内容块
块是页面上具有定义宽度的任何元素，并且被建立为块级元素。 通常，这些块是通过使用HTML
div.center {
保证金：0汽车;
宽度：80em;
}
此边界属性的CSS速记将设置顶部和底部边距为0，而左侧和右侧将使用“自动”。 这基本上占用了任何可用的空间，并在视口窗口的两侧均匀分配，有效地将页面上的元素居中。
在这里它被应用在HTML中：
但它内部的文本是左对齐的。
只要你的块有一个定义的宽度，它将自己居中在包含元素内。 该块中包含的文本不会居中，但会左对齐。 这是因为Web浏览器中的默认文本是左对齐的。 如果你想让文本居中，你可以使用我们前面介绍的文本对齐属性和这个方法一起来分割居中。
用CSS居中图像
尽管大多数浏览器都会使用我们已经查看过的段落来显示图片，但是依靠这种技术并不是一个好主意，因为W3C不建议这样做 。 由于不推荐，因此未来版本的浏览器总有可能选择忽略此方法。
您应该明确地告诉浏览器该图像是块级元素，而不是使用文本对齐来居中放置图像。 这样，您可以像对待任何其他块一样将其居中。 这是CSS来实现这一点：
img.center {
显示：块;
margin-left：auto;
margin-right：auto;
}
以下是我们希望以图片为中心的HTML代码：
您也可以使用内嵌CSS对齐对象（请参见下文），但不建议使用此方法，因为它将可视样式添加到HTML标记中。 请记住，我们希望分离样式和结构，因此在HTML代码中添加CSS样式并打破分隔，因此应尽可能避免。
使用CSS垂直居中元素
垂直居中对象在网页设计中一直是一个挑战，但随着CSS3中CSS灵活框布局模块的发布，现在有办法做到这一点。
垂直对齐与上面所述的水平对齐类似。 CSS属性与中间值垂直对齐。
.vcenter {
vertical-align：middle;
}
这种方法的缺点是并不是所有的浏览器都支持CSS FlexBox，尽管越来越多的浏览器正在使用这种新的CSS布局方法！ 事实上，今天所有的现代浏览器现在都支持这种CSS风格。 这意味着您对Flexbox的唯一担忧就是浏览器版本会更老。
如果您在旧版浏览器中遇到问题，W3C建议您使用以下方法在容器中垂直放置文本：
- 将元素放置在包含元素（例如div）中。
- 在包含元素上设置最小高度。
- 将包含元素声明为表格单元格。
- 将垂直对齐设置为“中间”。
例如，这里是CSS：
.vcenter {
最小高度：12em;
display：table-cell;
vertical-align：middle;
}
这里是HTML：
此文字在框中垂直居中。
垂直居中和旧版本的Internet Explorer
有一些方法可以强制Internet Explorer（IE）居中，然后使用条件注释，以便只有IE才能看到样式，但它们有点冗长和难看。 好消息是，随着微软最近决定放弃对老版本IE的支持，那些不支持的浏览器应该很快就会出来，这样网页设计师就可以更容易地使用CSS FlexBox等现代布局方法，这将使所有的CSS布局，不只是集中，更容易为所有网页设计师。