CSS 居中完全指南，你学会了吗？

今天来看看在 CSS 中有哪些方法可以实现元素的中完居中!

一、水平居中

1. 内联元素

水平居中

</div>(1)text-align

text-align 一般运用在块级元素中，南学使其中的中完文本对齐。实际上，南学运用在块级元素中的中完text-align会使其包含的内联元素水平对齐。

.container {

text-align: center;

}

2. 块级元素

水平居中</div>(1)margin

如果块元素的南学高度和宽度已知，就可以通过将元素的中完左右margin值设置为auto将元素水平居中：

.content {

width: 100px;

height: 100px;

margin-left: auto;

margin-right: auto;

}

如果有多个块元素，需要将多个元素包裹在一个元素中以使用该方法实现水平居中：

水平居中 水平居中

.box {

display: flex;

margin-left: auto;

margin-right: auto;

}

3. 通用

(1)Flex 布局

在 Flex 布局中，南学justify-content可以用于设置弹性盒子元素在主轴方向上的中完对齐方式。当其属性值为 center 时，南学其子元素整体会在主轴的中完中心位置。

.container {

display: flex;

justify-content: center;

}

如果弹性盒子的南学主轴是垂直方向，可以使用align-items来代替justify-content以实现元素的中完水平居中：

.container {

display: flex;

flex-direction: column

align-items: center;

}(2)Grid 布局

在 Grid 布局中，源码下载justify-content 属性会沿着行轴线(水平方向) 在网格容器中对齐网格。南学当属性值为center时，中完就可以将网格对齐到网格容器的水平居中位置。

.container {

display: grid;

justify-content: center;

}(3)绝对定位

可以通过将使用绝对定位和变换实现元素的水平居中：

.container {

position: relative;

}

.content {

position: absolute;

left: 50%;

transform: translateX(-50%);

}

如果块元素的宽度已知，也可以使用负边距来代替transform：

.container {

position: relative;

}

.content {

width: 100px;

position: absolute;

left: 50%;

margin-left: -50px;

}

二、垂直居中

1. 块级元素

垂直居中</div>(1)绝对定位

可以通过将使用绝对定位和变换实现元素的垂直居中：

.container {

position: relative;

}

.content {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

如果块元素的高度已知，也可以使用负边距来代替transform：

argin-top: -50px;}

2. 通用

2. 通用

(1)Flex 布局

在 Flex 布局中，align-items 属性用来定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。当其属性值为 center 时，元素位于容器的中心。

.container {

display: flex;

align-items: center;

}

如果将Flex 的主轴切换为垂直方向，则需要使用justify-content来代替align-items以实现元素的垂直居中：

.flex {

display: flex;

flex-direction: column;

justify-content: center;

}(2)Grid 布局

使用 CSS Grid 布局中，香港云服务器可以使用 align-content 属性将项目垂直居中到其网格区域。

.container {

display: grid;

align-content: center;

}

如果将网格的排列方向更改为水平，垂直居中依旧是生效的：

.container {

display: flex;

align-content: center;

grid-auto-flow: column;

}

三、水平垂直居中

水平垂直居中</div>(1)绝对定位

使元素垂直居中最通用的方法就是使用绝对定位和transform：

.container {

position: relative;

}

.content {

position: absolute;

top: 50%;

left: 50%;

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

}

如果元素的高度和宽度已知，也可以使用margin来代替transform:

.container {

position: relative;

}

.content {

width: 100px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

}(2)Flex 布局

在使用 Flex 布局时，可以结合上面的水平和垂直居中来实现水平垂直居中：

.container {

display: flex;

justify-content: center;

align-items: center;

}(3)Grid 布局

在 Grid 布局中，可以使用以下形式来实现元素的水平垂直居中：

.container {

display: grid;

place-items: center;

}

place-content 属性是align-content和justify-content的简写，当该属性的值为center时，所有的子元素堆叠在父元素的中间对齐。

源码库