[分享]css中居中对齐的代码

在Web开发中，设计好的界面需要进行居中对齐才能让页面更加美观和整洁。CSS提供了各种方法实现居中对齐，下面我们来看几种常见的方式。/ 水平居中对齐 / .text { textalign: cent...

在Web开发中，设计好的界面需要进行居中对齐才能让页面更加美观和整洁。CSS提供了各种方法实现居中对齐，下面我们来看几种常见的方式。

/* 水平居中对齐 */
.text {
  text-align: center;
}

/* 垂直居中对齐 */
.container {
  display: flex;
  align-items: center;
}

/* 水平垂直居中对齐 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

首先我们来看水平居中对齐，我们只需要在父元素中设置文本对齐方式为居中即可实现。代码如下：

.text{
  text-align:center;
} 

然后是垂直居中对齐，在父元素中使用flex布局，并设置align-items为center，就可以实现垂直居中对齐。代码如下：

.container{
  display:flex;
  align-items:center;
} 

接下来是水平垂直居中对齐，在父元素中设置relative定位，在子元素中设置absolute定位，并设置top和left为50%并使用transform属性平移来居中对齐。代码如下：

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

以上就是CSS中几种常见的居中对齐方式，可以根据实际需要选择相应的方式。