이 글은 주로 CSS를 사용하여 다양한 센터링을 구현하는 방법을 소개합니다. 이제 이를 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.
센터링은 레이아웃에 CSS를 사용할 때 자주 발생하는 상황입니다. . 센터링을 위해 CSS를 사용할 때 때로는 단일 속성이 이를 수행할 수 있으며 때로는 모든 브라우저와 호환되기 위해 특정 기술이 필요합니다. 이 기사에서는 몇 가지 일반적인 센터링 방법을 간략하게 소개합니다.
참고: 별도로 지정하지 않는 한 이 문서에 설명된 방법은 IE6+, Google 및 Firefox와 같은 주요 브라우저와 호환됩니다.
먼저 간단하고 무해한 센터링 방법에 대해 이야기해 보겠습니다.
구체적으로 요소의 margin-left 및 margin을 centering -right로 설정하세요. code>는 auto로 설정됩니다. 이 메서드는 수평 중심 정렬만 수행할 수 있으며 부동 요소나 절대 위치 요소에는 유효하지 않습니다. margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
4、使用表格
如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
在ie6、7中可以通过css的text-algin来控制表格内容的水平方向的对齐，无论内容是行内元素还是块状元素都有效。
但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效，只能用表格自有的align属性。
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：
但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
那面所说的都是很基础的方法，自然不能称之为奇淫巧计，下面就来说一些需要使用一些技巧的居中方法。
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
运行效果：
如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top ,margin-top
display는 inline입니다. code> 또는 inline-block 등)을 사용하여 수평 중앙에 배치합니다. 그러나 IE6과 7이라는 두 가지 이상한 브라우저에서는 모든 요소를 수평 중앙에 배치할 수 있다는 점에 유의해야 합니다. line-height를 사용하여 텍스트 한 줄을 수직으로 가운데에 배치합니다.🎜🎜텍스트의 line-height를 텍스트의 상위 컨테이너 높이로 설정합니다. 이는 한 줄만 있는 상황에 적합합니다. 텍스트. 🎜🎜4. 테이블 사용🎜🎜테이블을 사용하는 경우 다양한 센터링 문제에 대해 전혀 걱정할 필요가 없습니다. td(및 가능하면 th) 요소의 align="center"만 사용하세요. /code> 및 valign="middle" 이 두 속성은 내부 콘텐츠의 수평 및 수직 중앙 정렬을 완벽하게 처리할 수 있으며, 테이블은 기본적으로 내부 콘텐츠를 수직 중앙에 배치합니다. css에서 테이블 내용의 중앙 정렬을 제어하려면 vertical-align:middle을 사용하여 수직 중앙 정렬을 할 수 있습니다. >css 해당 속성은 없지만 IE6 및 7에서는 text-align:center를 사용하여 테이블, IE8+ 및 Google, Firefox 및 기타 브라우저의 요소를 가로 중앙에 배치할 수 있습니다. code> text-align:center는 인라인 요소에서만 작동하며 블록 요소에는 영향을 미치지 않습니다. 🎜🎜
css를 전달할 수 있습니다. text-algin은 내용이 인라인 요소인지 블록 요소인지에 관계없이 테이블 내용의 가로 정렬을 제어합니다. 🎜🎜그러나 ie8+ 및 에서는 chrome 및 firefox와 같은 브라우저의 text-align:center는 블록 요소에 대해 유효하지 않습니다. 테이블의 자체 align만 사용할 수 있습니다. 코드>속성. 🎜🎜display:table-cell을 사용하여 가운데로 🎜🎜표가 아닌 요소의 경우 display:table-cell을 사용하여 표 셀로 시뮬레이션하면 표를 사용할 수 있습니다. 매우 편리한 센터링 기능. 예:left 또는 top 속성을 50%로 설정하는 것입니다. 요소 중앙에 위치하지 않지만 요소 너비 또는 높이의 절반만큼 중앙 위치에서 오른쪽 또는 왼쪽으로 오프셋되므로 음수 margin-left 또는 margin을 사용해야 합니다. - top 값은 다시 중앙 위치로 가져오는 데 사용됩니다. 음수 margin 값은 요소 너비 또는 높이의 절반입니다. 왼쪽 및 margin-left만 사용하여 가로 중심에 맞출 수 있고 top 및 margin-top를 사용하면 수직으로 중앙에 배치됩니다. 🎜🎜절대 위치 지정을 사용하여 중심을 맞추는 또 다른 방법🎜🎜이 방법은 너비나 높이가 이미 알려진 요소에만 작동하며 안타깝게도 IE9+, Google, Firefox 및 w3c 표준 브라우저를 준수하는 기타 최신 요소만 지원합니다. 🎜<p>다음은 이 방법을 이해하기 위한 코드입니다. <br><img src="https://img.php.cn/upload/article/000/000/009/c5987c2a4a353965fc763fe1bf1fe6a3-7.png" alt=""><br>작동 효과: <br><img src="https://img.php.cn/upload/article/000/000/009/c5987c2a4a353965fc763fe1bf1fe6a3-8.png" alt=""></p>
<p>요소의 너비와 높이가 여기에서 정의되지 않은 경우 요소의 너비는 다음 값에 의해 결정됩니다. 왼쪽과 오른쪽, 높이에 따라 결정됩니다. 위쪽과 아래쪽의 값에 따라 결정되므로 요소의 높이와 너비를 설정해야 합니다. 동시에 왼쪽, 오른쪽, 위쪽, 아래쪽의 값을 변경하면 요소가 특정 방향으로 오프셋될 수도 있습니다. </p>
<h2>플로팅 및 상대 위치 지정을 사용하여 수평 센터링 수행</h2>
<p>이 방법은 플로팅 요소를 수평으로 중앙에 배치하는 방법에 대한 솔루션이기도 하며 중앙에 정렬해야 하는 요소의 너비를 알 필요가 없습니다. </p>
<p>플로팅 센터링의 원리는 상위 요소 <code>50%의 너비를 기준으로 플로팅 요소를 상대적으로 위치시키는 것인데, 이때 요소는 아직 센터링되지 않고 센터 위치의 절반입니다. 너비가 있는 경우에는 자체 너비의 추가 절반을 뒤로 당기기 위해 내부 하위 요소에 대한 상대 위치 지정을 사용해야 합니다. 그리고 상대 위치 지정은 자체를 기준으로 배치되므로 자체 너비의 절반만 자체를 기준으로 배치하면 됩니다. 왼쪽 또는 오른쪽을 50%로 설정하여 얻을 수 있으므로 실제 너비가 무엇인지 알 필요가 없습니다. 50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。
这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。
看下代码：
运行效果：
如果父元素高度是已知的，要把它里面的子元素进行水平垂直居中，则可以使用这种方法，且子元素的宽度或高度都不必知道。
该方法只对IE6和IE7有效。
该方法的要点是给父元素设一个合适的font-size的值，这个值的取值为该父元素的高度除以1.14得到的值，并且子元素必须 是一个inline或inline-block元素，需要加上vertical-align:middle属性。
至于为什么是除以1.14而不是其他的数，还真没有人知道，你只需要记住1.14这个数就行了。
在方法5中说过在IE8+、火狐谷歌等现在浏览器中可以用display:table-cell来进行居中，而这里的font-size的方法则适用于IE6和IE7，所以把这两种方法结合起来就能兼容所有浏览器了：
上面的例子中因为要居中的元素是一个块状元素，所以我们还需要把他变成行内元素，如果要居中的元素是图片等行内元素，则可以省略此步。
另外，如果 vertical-align:middle 是写在父居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。
注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。
先来说几种简单的、人畜无害的居中方法
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
把文字的line-height
font-size 값을 설정하는 것입니다. 이 값의 값은 상위 요소의 높이를 1.14로 나눈 값이며, 하위 요소는 inline 또는 inline-block 요소가 vertical-align:middle 속성과 함께 추가되어야 합니다. 🎜🎜왜 다른 숫자가 아닌 1.14로 나누어지는지는 아무도 모르실텐데요. 1.14라는 숫자만 기억하시면 됩니다. 🎜🎜🎜
🎜🎜방법 5에서 언급했듯이 IE8+, Firefox, Google 등 현재 브라우저에서 사용할 수 있습니다 display:table-cell 센터링을 위한 것이며 여기서 font-size 방법은 IE6 및 IE7에 적합하므로 이 두 방법을 결합하면 모든 브라우저에서 호환될 수 있습니다 ：🎜🎜🎜
🎜🎜위의 예에서 가운데 정렬할 요소는 블록 요소이므로 인라인이 됩니다. 가운데 정렬할 요소가 그림과 같은 인라인 요소인 경우 이 단계를 생략할 수 있습니다. 🎜🎜그리고 vertical-align:middle을 부모의 중앙에 쓰면 CSS를 레이아웃으로 사용할 때 흔히 접하게 되는 상황입니다. 센터링을 위해 CSS를 사용할 때 때로는 단일 속성이 이를 수행할 수 있으며 때로는 모든 브라우저와 호환되기 위해 특정 기술이 필요합니다. 이 기사에서는 몇 가지 일반적인 센터링 방법을 간략하게 소개합니다. 🎜🎜참고: 별도로 지정하지 않는 한 이 문서에 설명된 방법은 IE6+, Google 및 Firefox와 같은 주요 브라우저와 호환됩니다. 🎜🎜먼저 간단하고 무해한 센터링 방법에 대해 이야기해 보겠습니다.🎜🎜여백을 자동으로 설정하세요🎜🎜구체적으로 요소의 margin-left 및 margin을 centering -right로 설정하세요. code>는 auto로 설정됩니다. 이 메서드는 수평 중심 정렬만 수행할 수 있으며 부동 요소나 절대 위치 요소에는 유효하지 않습니다. 🎜🎜text-align:center를 사용하세요🎜🎜 이에 대해서는 말할 것도 없습니다. 그림, 버튼, 텍스트와 같은 인라인 요소에만 사용할 수 있습니다(display는 inline입니다. code> 또는 inline-block 등)을 사용하여 수평 중앙에 배치합니다. 그러나 IE6과 7이라는 두 가지 이상한 브라우저에서는 모든 요소를 수평 중앙에 배치할 수 있다는 점에 유의해야 합니다. 🎜🎜line-height를 사용하여 텍스트 한 줄을 수직으로 가운데에 배치합니다.🎜🎜텍스트의 line-height를 텍스트의 상위 컨테이너 높이로 설정합니다. 이는 한 줄만 있는 상황에 적합합니다. 텍스트. 🎜🎜4. 양식을 사용하세요🎜테이블을 사용하는 경우 다양한 센터링 문제에 대해 전혀 걱정할 필요가 없습니다. td(및 가능하면 th) 요소의 align="center" 및 valign="middle" 이 두 가지 속성은 내부 콘텐츠의 수평 및 수직 중앙 정렬을 완벽하게 처리할 수 있으며, 테이블은 기본적으로 내부 콘텐츠를 수직 중앙에 배치합니다. css에서 테이블 내용의 중앙 정렬을 제어하려면 vertical-align:middle을 사용하여 수직 중앙 정렬을 할 수 있습니다. >css 해당 속성은 없지만 IE6 및 7에서는 text-align:center를 사용하여 테이블, IE8+ 및 Google, Firefox 및 기타 브라우저의 요소를 가로 중앙에 배치할 수 있습니다. code> text-align:center는 인라인 요소에서만 작동하며 블록 요소에는 영향을 미치지 않습니다. align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
在ie6、7中可以通过css的text-algin来控制表格内容的水平方向的对齐，无论内容是行内元素还是块状元素都有效。
但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效，只能用表格自有的align属性。
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：
但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
那面所说的都是很基础的方法，自然不能称之为奇淫巧计，下面就来说一些需要使用一些技巧的居中方法。
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
运行效果：
如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top ,margin-top来实现垂直居中。
此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。
下面用一段代码来了解这种方法：
运行效果：
这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移，大家可以自己去尝试。
此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或right 设为50%
css를 전달할 수 있습니다. text-algin은 내용이 인라인 요소인지 블록 요소인지에 관계없이 테이블 내용의 가로 정렬을 제어합니다. 🎜🎜그러나 ie8+ 및 에서는 chrome 및 firefox와 같은 브라우저의 text-align:center는 블록 요소에 대해 유효하지 않습니다. 테이블의 자체 align만 사용할 수 있습니다. 코드>속성. 🎜display:table-cell을 사용하여 다음과 같이 표 셀로 시뮬레이션할 수 있습니다. 테이블의 편리한 센터링 기능을 활용할 수 있습니다. 예:left 또는 top 속성을 50%로 설정하는 것입니다. 요소 중앙에 위치하지 않지만 요소 너비 또는 높이의 절반만큼 중앙 위치에서 오른쪽 또는 왼쪽으로 오프셋되므로 음수 margin-left 또는 margin을 사용해야 합니다. - top 값은 다시 중앙 위치로 가져오는 데 사용됩니다. 음수 margin 값은 요소 너비 또는 높이의 절반입니다. 왼쪽 및 margin-left만 사용하여 가로 중심에 맞출 수 있고 top 및 margin-top를 사용하면 수직으로 중앙에 배치됩니다. 🎜<h2>절대 위치 지정을 사용한 또 다른 중앙 정렬 방법</h2>🎜이 방법은 너비나 높이가 이미 알려진 요소에만 적용되며 안타깝게도 IE9+, Google, Firefox 등만 지원합니다. w3c 표준. 🎜🎜이 방법을 이해하려면 아래 코드를 사용하세요.<br><img.php.cn alt=" "></img.php.cn><br>작동 효과:<br><img.php.cn alt="">🎜🎜여기서 요소의 너비와 높이가 정의되지 않은 경우 요소의 너비는 left 및 right 값에 따라 결정되고 높이는 top 값에 따라 결정됩니다. 및 하단이므로 요소의 높이와 너비를 설정해야 합니다. 동시에 왼쪽, 오른쪽, 위쪽, 아래쪽의 값을 변경하면 요소가 특정 방향으로 오프셋될 수도 있습니다. 🎜<h2>가로 중심 맞추기를 위해 상대 위치 지정과 함께 부동 소수점 사용</h2>🎜이 방법은 부동 요소를 수평으로 중앙에 배치하는 방법에 대한 솔루션이기도 하며 중앙에 배치해야 하는 요소의 너비를 알 필요가 없습니다. 🎜🎜플로팅 센터링의 원리는 상위 요소 <code>50%의 너비를 기준으로 플로팅 요소를 상대적으로 위치시키는 것인데, 이때 요소는 아직 센터링되지 않고 센터 위치의 절반입니다. 너비가 있는 경우에는 자체 너비의 추가 절반을 뒤로 당기기 위해 내부 하위 요소에 대한 상대 위치 지정을 사용해야 합니다. 그리고 상대 위치 지정은 자체를 기준으로 배치되므로 자체 너비의 절반만 자체를 기준으로 배치하면 됩니다. 왼쪽 또는 오른쪽을 50%로 설정하여 얻을 수 있으므로 실제 너비가 무엇인지 알 필요가 없습니다. 🎜중앙에 부동 및 상대 위치 지정을 사용하는 이 방법은 너비가 지속적으로 변경되더라도 중앙에 배치할 요소의 너비를 알 필요가 없다는 장점이 있습니다. 단점은 래핑할 추가 요소가 필요하다는 것입니다. 중심에 놓일 요소.
코드 보기:
작동 효과:
상위 요소의 높이를 알고 있고 하위 요소를 수평 및 수직으로 가운데에 배치하려는 경우, 이 방법을 사용하면 하위 요소의 너비나 높이를 알 필요가 없습니다.
이 방법은 IE6 및 IE7에만 유효합니다.
이 방법의 핵심은 상위 요소에 적합한 font-size 값을 설정하는 것입니다. 이 값의 값은 상위 요소의 높이를 1.14로 나눈 값이며, 하위 요소는 inline 또는 inline-block 요소가 vertical-align:middle 속성과 함께 추가되어야 합니다. font-size的值，这个值的取值为该父元素的高度除以1.14得到的值，并且子元素必须 是一个inline或inline-block元素，需要加上vertical-align:middle属性。
至于为什么是除以1.14而不是其他的数，还真没有人知道，你只需要记住1.14这个数就行了。
在方法5中说过在IE8+、火狐谷歌等现在浏览器中可以用display:table-cell来进行居中，而这里的font-size的方法则适用于IE6和IE7，所以把这两种方法结合起来就能兼容所有浏览器了：
上面的例子中因为要居中的元素是一个块状元素，所以我们还需要把他变成行内元素，如果要居中的元素是图片等行内元素，则可以省略此步。
另外，如果 vertical-align:middle 是写在父元素中而不是子元素中，这样也是可以的，只不过计算font-size
방법 5에서 언급했듯이 IE8+, Firefox, Google 등 현재 브라우저에서 사용할 수 있습니다 display:table-cell
센터링을 위한 것이며 여기서font-size 방법은 IE6 및 IE7에 적합하므로 이 두 방법을 결합하면 모든 브라우저에서 호환될 수 있습니다 ：
위의 예에서 가운데 정렬할 요소는 블록 요소이므로 인라인이 됩니다. 가운데 정렬할 요소가 그림과 같은 인라인 요소인 경우 이 단계를 생략할 수 있습니다.
또한, 하위 요소가 아닌 상위 요소에 vertical-align:middle을 작성하는 경우에도 가능하지만 글꼴 크기를 계산할 때 사용됩니다. > 1.14의 값은 대략 1.5가 되어야 합니다. 위 내용은 일반적인 센터링 방법입니다. 누락된 부분이나 오류가 있으면 수정해주세요!
위 내용은 CSS를 사용하여 다양한 센터링 방법 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
