[分享]css两种方法时间居中

在CSS中，实现居中布局是一个非常基础的技能，其中，时间居中布局是其中比较常见的一种。下面分别介绍两种实现时间居中的方法。第一种方法是使用CSS3中的Flex布局，代码如下：.container { ...

在CSS中，实现居中布局是一个非常基础的技能，其中，时间居中布局是其中比较常见的一种。下面分别介绍两种实现时间居中的方法。

第一种方法是使用CSS3中的Flex布局，代码如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container span {
  font-size: 24px;
} 

其中，.container表示要进行居中布局的容器，display属性设置为flex，然后通过justify-content和align-items来分别设置水平和垂直居中的方式。span标签表示显示时间的元素，设置一个合适的字号即可。

第二种方法是使用绝对定位来实现时间的居中，代码如下：

.container {
  position: relative;
}
.container span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 24px;
  transform: translate(-50%, -50%);
} 

其中，.container的position属性设置为relative，然后通过在span标签上设置position：absolute，left和top属性分别设置为50%来实现元素居中。transform属性中的translate函数用来调整span元素的位置，使其在水平和垂直方向上完全居中。

以上两种方法都能够实现时间的居中布局，具体使用哪一种方法，可以根据自己的需求进行选择，灵活运用能够帮助我们更好地实现页面布局。