CSS，position，amp，居中(水平,垂直)

CSS的定位属性position是一个常用的样式属性，可以让我们控制元素在网页中的位置。居中是定位中较常用的操作，可以分为水平居中和垂直居中。在这篇文章中，我们将学习如何使用CSS的position属性让一个元素水平滑居中和垂直居中，包括不同的方法，以及各自的优缺点。这篇文章将介绍以下内容：

1. CSS position属性

2. 水平居中的方法

2.1 margin: auto;

2.2 text-align: center;

2.3 Flexbox

3. 垂直居中的方法

3.1 使用table布局

3.2 使用Flexbox

3.3 使用transform属性

4. 水平和垂直居中的方法

4.1 使用Flexbox

4.2 使用绝对定位和负边距

4.3 使用transform属性

CSS position属性

在CSS中，position属性指定了一个元素在文档中的定位类型。position有四个值：

static: 默认值。元素按照文档流布局。

relative: 元素相对于自身位置移动。

absolute: 元素相对于其最近的已定位祖先元素（relative, absolute, fixed）移动。

fixed: 元素相对于屏幕窗口的位置移动，即不会随着屏幕滚动而移动。

水平居中的方法

1. margin: auto;

margin:auto; 是最常用的让一个盒子水平居中的方法。设置margin-left和margin-right为auto，对于那些没有设置宽度的盒子，它们会从左、右两边一直扩展到目标宽度，从而实现水平居中。

例如，以下HTML中element是想要进行水平居中的盒子。

```

```

CSS应该像这样设置：

```

.container {

text-align: center;

}

.element {

margin: auto;

}

```

.container 的text-align: center;可以将它内部的所有元素设置在容器的中心。

2. text-align: center;

这种方法比较适用于行内元素，可以通过将父元素的text-align属性设置为center来实现元素的水平中心对齐。

例如，以下HTML中element是想要进行水平居中的行内盒子。

```

```

CSS应该像这样设置：

```

.container {

text-align: center;

}

.element {

display: inline-block;

}

```

将element设置为inline-block，可以使元素按照块级元素的方式呈现，并在水平方向上和其他元素保持距离。在这种情况下，父元素的text-align: center;可以将行内元素加以居中。

3. Flexbox

在Flexbox模型中，可以通过将flex容器设置为display: flex，然后通过将flex项目的justify-content属性设置为center来让这些项目水平对齐。

例如，以下HTML中element是想要进行水平居中的盒子。

```

```

CSS应该像这样设置：

```

.container {

display: flex;

justify-content: center;

}

.element {

// ...

}

```

垂直居中的方法

1. 使用table布局

在CSS中，table布局可以用来进行元素的垂直居中，通过将HTML元素具化为 table, table-cell 和 table-row的组合来实现。这种方法比较简单，但是在语义上不符合标准。

例如，以下HTML中element是想要进行垂直居中的盒子。

```

```

CSS应该像这样设置：

```

.container {

display: table;

height: 100%;

}

.element {

display: table-cell;

vertical-align: middle;

}

```

将容器设置为table和容器高度设置为100%，将其中的元素设置为table-cell并垂直对齐，可以实现垂直居中。

2. 使用Flexbox

在Flexbox模型中，可以通过设置align-items: center样式来将flex项目垂直对齐。

例如，以下HTML中element是想要进行垂直居中的盒子。

```

```

CSS应该像这样设置：

```

.container {

display: flex;

align-items: center;

}

.element {

// ...

}

```

3. 使用transform属性

CSS的transform属性使得元素能够被移动、旋转或者缩放而不改变布局。通过设置translateY和calc来将元素向上/下移动一半的高度。

例如，以下HTML中element是想要进行垂直居中的盒子。

```

```

CSS应该像这样设置：

```

.container {

position: relative;

}

.element {

position: absolute;

top: calc(50% - (height of element)/2);

transform: translateY(-50%);

}

```

水平和垂直居中的方法

1. 使用Flexbox

使用Flexbox居中元素是一种很便利的方法，可以同时水平居中和垂直居中。

例如，以下HTML中element是想要进行水平居中和垂直居中的盒子。

```

```

CSS应该像这样设置：

```

.container {

display: flex;

justify-content: center;

align-items: center;

}

.element {

// ...

}

```

2. 使用绝对定位和负边距

通过设置绝对定位和负边距，可以同时水平居中和垂直居中。

例如，以下HTML中element是想要进行水平居中和垂直居中的盒子。

```

```

CSS应该像这样设置：

```

.container {

position: relative;

height: 100vh;

}

.element {

position: absolute;

top: 50%;

left: 50%;

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

}

```

3. 使用transform属性

使用transform属性同时垂直居中和水平居中。

例如，以下HTML中element是想要进行水平居中和垂直居中的盒子。

```

```

CSS应该像这样设置：

```

.container {

position: relative;

}

.element {

position: absolute;

top: 50%;

left: 50%;

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

}

```

总结

通过使用CSS的position属性，可以将元素在网页中水平和垂直进行居中。其中水平居中可以通过margin: auto;、text-align: center;、Flexbox三种方法来实现，垂直居中可以通过table布局、Flexbox、transform属性三种方法来实现。水平和垂直居中可以通过Flexbox、绝对定位和负边距和transform属性三种方法来实现。在使用CSS进行水平和垂直居中时，应该根据实际情况选择合适的方法，以提升页面的质量和易用性。