[分享]css中居中对其在哪

CSS中的居中对齐主要涉及到元素的水平居中和垂直居中处理。在Web设计中，我们往往需要以视觉效果来完成对元素的对齐排版。水平居中：/通过设置元素的宽度和左右margin值来实现水平居中/ div{ w...

CSS中的居中对齐主要涉及到元素的水平居中和垂直居中处理。在Web设计中，我们往往需要以视觉效果来完成对元素的对齐排版。

水平居中：

/*通过设置元素的宽度和左右margin值来实现水平居中*/
div{
  width: 200px;
  margin: auto;
} 

此处的auto属性值实际上是根据浏览器计算得出的，我们通过这个来实现了元素的水平居中效果。

垂直居中：

/*对行内元素使用line-height来实现垂直居中*/
span{
  line-height: 100px;
}

/*对块级元素使用绝对定位和负margin值来实现垂直居中*/
div{
  position: absolute;
  top: 50%;
  margin-top: -50px;/*元素高度的一半*/
} 

上述代码中，我们通过定义行内元素的line-height属性值为元素高度的一半，来实现垂直居中。

对于块级元素，我们需要将其设置为绝对定位，然后通过设置top为50%，并将其margin-top值设为元素高度的一半来实现垂直居中。