css居中代码怎么写？

CSS居中是Web开发中最基本的技能之一，它用于让网页中的元素在页面中水平对齐或垂直对齐。下面将介绍一些常用的CSS居中代码。

1. 水平居中

（1）text-align: center;

使用text-align: center可以将块级元素的内容水平居中。举个例子，可以在包含要居中的元素的父元素上应用如下代码：

```

.parent {

text-align: center;

}

```

这将使包含在parent元素中的所有文本和内联元素（如图像）居中。

（2）margin: auto;

将margin设置为auto可以使元素水平居中。该元素的宽度必须定义，并且必须小于其父元素的宽度。例如，如果要将一个div元素居中，可以使用以下CSS：

```

div {

width: 50%;

margin: auto;

}

```

这将使div元素水平居中，宽度为其父元素的50％。

2. 垂直居中

（1）使用display：flex和align-items：center。

将元素的父元素的display设置为flex，然后将其align-items设置为center，可以将元素垂直居中。

```

.parent {

display: flex;

align-items: center;

}

```

这将使parent元素的所有子元素在页面上垂直居中。

（2）使用display：table-cell和vertical-align：middle。

将元素的display属性设置为table-cell，然后将其垂直对齐设置为middle，可以将元素垂直居中。

```

.parent {

display: table-cell;

vertical-align: middle;

}

```

这将使parent元素的所有子元素在页面上垂直居中。

3. 水平和垂直居中

（1）使用transform和absolute定位。

可以通过将元素的position属性设置为absolute，并使用transform属性将元素移动到中心来实现水平和垂直居中。

```

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

```

这将使child元素在页面上水平和垂直居中。

（2）使用flexbox和margin:auto。

使用flexbox和margin:auto可以同时实现水平和垂直居中。

```

.parent {

display: flex;

justify-content: center;

align-items: center;

}

.child {

margin: auto;

}

```

这将使child元素在页面上水平和垂直居中。

总结

CSS居中是Web开发中最基本的技能之一。无论您想要实现水平居中、垂直居中，还是同时实现水平和垂直居中，都可以使用上述方法。在设计网页时，您可以根据实际需求选择适当的方法来实现CSS居中。