CSS里的各种水平垂直居中基础写法心得总结

CSS实现水平垂直居中的基础写法是前端开发中非常常见的一项技能，它主要分为水平居中和垂直居中两大部分。在这篇文章中，我们将重点学习各种基础的居中方式，并且会涉及到行内元素和块级元素的概念，以及display属性在元素类型转换中的应用。 我们来看看行内元素和块级元素。在HTML中，根据元素的表现形式和行为特点，我们可以将元素大致分为行内元素和块级元素两类。行内元素也被称为内联元素，它们不会独占一行，而是根据内容的多少来决定占据的空间。行内元素无法直接设置宽度和高度，因为它们的尺寸是由内容自动决定的。此外，行内元素的上下外边距不会产生任何效果，而左右外边距则会影响元素间的水平间距。内联元素主要包括a标签、b标签（虽然不推荐使用）、br标签、em标签、i标签、img标签、input标签、label标签、select标签、small标签、span标签、strike标签以及strong标签等。 与行内元素不同，块级元素始终占据一整行，无论其内容多少。块级元素可以设置宽度、高度、行高以及外边距和内边距，这意味着块级元素可以完全控制其尺寸和布局。块级元素包括div、dl（通常与dt和dd标签搭配使用）、form、h1到h6标签、hr、ol、p以及ul等。 在CSS中，我们可以通过display属性来改变一个元素的类型，从而使得行内元素拥有块级元素的特性，反之亦然。例如，将一个p元素的display设置为inline后，它就会表现得像行内元素一样；而将span元素的display设置为block，则它就可以独占一行并且可以设置宽度和高度。 接下来，我们来讲讲CSS中实现水平居中的几种基础写法。 1. 利用text-align属性实现块中文字的水平居中。这个属性适用于块级元素（或者被CSS控制为块级元素的内联元素），其作用是使得块元素中的文字或图片在水平方向上居中。需要注意的是，被设置为内联元素的块元素则不能应用text-align属性。例如，可以在p标签中设置text-align: center;来使内部文字居中，而在span中则需要先将其转换为块级元素，然后再使用text-align属性。 2. 使用margin属性实现块级元素的水平居中。这通常是通过将块级元素的左右外边距设置为自动（auto）来实现的。这种方法适用于块级元素，例如可以给div设置margin: 0 auto;来实现水平居中。 关于垂直居中的方法，CSS也提供了多种选择： 1. 使用line-height属性在单行文本的情况下实现垂直居中。这种方法适用于块级元素内部只包含一行文本的情况，通过设置line-height属性与块级元素的高度相同，即可实现垂直居中。 2. 使用display: table-cell和vertical-align属性。这种方法将元素设置为表格单元格，然后通过vertical-align属性实现垂直居中。需要注意的是，这种方法可能在某些浏览器中不兼容。 3. 使用Flexbox布局。这是一个非常强大的布局方式，可以很容易地实现水平和垂直居中。要使用Flexbox实现居中，需要将父元素的display属性设置为flex，然后通过align-items属性和justify-content属性分别设置垂直和水平居中。 CSS中的水平垂直居中实现方法多种多样，分别适用于不同的布局需求。掌握这些基础的居中方式，对于我们进行网页布局和页面设计具有非常重要的意义。通过阅读这篇文章，我们可以了解到行内元素和块级元素的基本概念，以及如何使用CSS中的display属性来转换元素的类型。同时，我们也可以学会如何通过text-align、margin、line-height、display: table-cell和vertical-align属性以及Flexbox布局等方式来实现水平和垂直居中的效果。这些知识的积累将为我们在前端开发中提供更多的解决方案。