[分享]css全局居中代码

CSS中的全局居中是网页设计中比较常见的需求。这里为大家分享一些实现全局居中的CSS代码。

body {
  display: flex;
  justify-content: center;
  align-items: center;
} 

以上代码是通过Flex布局来实现全局居中的，其中display属性设置为flex表示使用Flex布局。justify-content属性用于水平居中，align-items属性用于垂直居中。

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

以上代码是通过绝对定位和CSS3的transform属性来实现全局居中的。其中，top和left属性都设置为50%表示容器的左上角在屏幕的中心位置。transform属性中的translate函数用于对容器进行平移，取值为负数表示向相反的方向平移，从而使容器完全居中。

.container {
  position: relative;
  margin: auto;
} 

以上代码是通过相对定位和auto属性的margin值来实现全局居中的。position属性设置为relative表示相对定位，由于没有设置top和left属性，此时容器的左上角仍然在文档流中的原位置，但是由于margin值为auto，浏览器会自动计算容器向左、向右平移的距离，从而实现容器的水平居中。同理，margin-top和margin-bottom的值也设置为auto时，可以实现容器的垂直居中。