css一排放4个div居中

CSS是前端开发必须要掌握的技能之一，而如何让一个页面中的四个标签水平居中，是初学者经常会碰到的问题。本文将介绍多种方法实现此目标。

方法一：使用text-align属性

<div style="text-align: center;">
  <div>Content1</div>
  <div>Content2</div>
  <div>Content3</div>
  <div>Content4</div>
</div> 

将包含四个标签的外层标签的text-align属性设置为"center"，即可实现四个标签水平居中。

方法二：使用flex布局

<div style="display: flex; justify-content: center;">
  <div>Content1</div>
  <div>Content2</div>
  <div>Content3</div>
  <div>Content4</div>
</div> 

将包含四个标签的外层标签的display属性设置为"flex"，并设置justify-content属性为"center"，即可让四个标签水平居中。

方法三：使用grid布局

<div style="display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center;">
  <div>Content1</div>
  <div>Content2</div>
  <div>Content3</div>
  <div>Content4</div>
</div> 

将包含四个标签的外层标签的display属性设置为"grid"，并设置grid-template-columns属性为"repeat(4, 1fr)"，即可让四个标签等分屏幕宽度，并设置justify-items属性为"center"，即可让四个标签水平居中。

方法四：使用position属性

<div style="position: relative;">
  <div style="position: absolute; left: 50%; transform: translateX(-50%);">Content1</div>
  <div style="position: absolute; left: 50%; transform: translateX(-50%);">Content2</div>
  <div style="position: absolute; left: 50%; transform: translateX(-50%);">Content3</div>
  <div style="position: absolute; left: 50%; transform: translateX(-50%);">Content4</div>
</div> 

将四个标签的position属性设置为"absolute"，将它们从文档流中脱离，并将它们左边距的距离设为50%，并通过transform属性将它们向左平移自身宽度的50%，即可使四个标签水平居中。

以上就是四种不同的方法，实现四个标签水平居中。读者可根据自己的实际情况，选择最合适的方法。