css中居中显示的代码怎么写，CSS实现元素居中显示的方法汇总

在CSS中实现居中显示，可以使用多种方法，以下是一些常用的居中显示代码示例：，1. 水平居中：，``css，.center-horizontally {， margin-left: auto;， margin-right: auto;，}，`，或使用Flexbox：，`css，.center-horizontally-flex {， display: flex;， justify-content: center;，}，`，2. 垂直居中：，`css，.center-vertically {， position: absolute;， top: 50%;， left: 50%;， transform: translate(-50%, -50%);，}，`，或使用Flexbox：，`css，.center-vertically-flex {， display: flex;， align-items: center;，}，`，3. 水平垂直居中（结合以上两种）：，`css，.center-both {， position: absolute;， top: 50%;， left: 50%;， transform: translate(-50%, -50%);，}，`，或使用Flexbox：，`css，.center-both-flex {， display: flex;， justify-content: center;， align-items: center;，}，``

嗨，大家好！最近我在做网页设计的时候遇到了一个问题，就是如何让内容在网页中居中显示，我知道CSS有这方面的属性，但是具体怎么写呢？希望有经验的网友们能给我指导一下,谢谢！

一：水平居中

使用text-align属性

在父元素上设置text-align: center;可以让其中的内容水平居中。

.parent {
  text-align: center;
}

使用flex布局

利用flex布局的justify-content: center;属性,可以在父元素上实现水平居中。

.parent {
  display: flex;
  justify-content: center;
}

使用margin属性

通过设置左右margin为auto,也可以实现水平居中。

.child {
  margin: 0 auto;
}

二：垂直居中

使用line-height属性

通过设置元素的line-height等于其height,可以实现在行内元素或单行文本的垂直居中。

.child {
  line-height: 50px; /* 假设height也为50px */
}

使用flex布局

利用flex布局的align-items: center;属性,可以在父元素上实现垂直居中。

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

使用table布局

将父元素设置为display: table;，子元素设置为display: table-cell;，并使用vertical-align: middle;属性,可以实现在垂直方向上的居中。

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

三：水平和垂直同时居中

使用flex布局

通过同时设置justify-content: center;和align-items: center;,可以在父元素上实现水平和垂直居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用grid布局

利用grid布局的place-items: center;属性,可以在父元素上实现水平和垂直居中。

.parent {
  display: grid;
  place-items: center;
}

使用绝对定位和transform属性

通过将子元素设置为绝对定位，并使用transform: translate(-50%, -50%);属性,可以实现在父元素中水平和垂直居中。

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

四：居中图片

使用flex布局

通过设置父元素为flex布局，并使用justify-content: center;和align-items: center;,可以实现在父元素中居中显示图片。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用绝对定位和margin属性

通过将图片设置为绝对定位，并设置左右和上下margin为auto,可以实现在父元素中居中显示图片。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px; /* 图片宽度的一半 */
}

五：居中文本

使用text-align属性

在父元素上设置text-align: center;,可以让其中的文本水平居中。

.parent {
  text-align: center;
}

使用flex布局

利用flex布局的justify-content: center;属性,可以在父元素上实现文本水平居中。

.parent {
  display: flex;
  justify-content: center;
}

使用margin属性

通过设置左右margin为auto,也可以实现文本水平居中。

.child {
  margin: 0 auto;
}

就是关于CSS中居中显示的代码写法的详细介绍,希望对大家有所帮助！

其他相关扩展阅读资料参考文献：

CSS中居中显示的代码怎么写 的水平居中

在CSS中，实现文本内容的水平居中是一个常见的需求,以下是几种常见的方法：

1. 使用text-align: center;属性，这是最直接的方法，只需将文本元素的text-align属性设置为center即可实现水平居中。

div {
  text-align: center;
}

2. 利用flex布局，对于使用flex布局的容器，可以通过设置justify-content: center;来实现子元素的水平居中。

.container {
  display: flex;
  justify-content: center;
}

块级元素的水平垂直居中

块级元素在页面中占据一定的空间，实现其水平和垂直居中稍微复杂一些,以下是几种常见的方法：

利用绝对定位和transform属性，给需要居中的元素设置绝对定位，然后通过计算top和left值,结合transform属性实现居中。

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

使用flexbox布局，通过设置display属性为flex，并结合justify-content和align-items属性,可以轻松实现块级元素的水平和垂直居中。

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

网格布局中的居中显示

在CSS Grid布局中，居中显示元素变得非常简单,以下是几种方法：

使用grid-template-columns和grid-template-rows，通过定义网格的列和行,可以将元素放置在网格的中心位置。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 根据屏幕大小自动调整列数 */
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); /* 根据屏幕大小自动调整行数 */ /* 将元素放置在中心位置 */ /* grid-area可以指定元素的位置 */ } .center-item { grid-area: center; } 2. 使用justify-content和align-content属性，对于使用Grid布局的容器，可以通过设置justify-content和align-content属性来实现子元素的居中。 .grid { display: grid; justify-content: center; align-content: center; } 四、使用CSS Grid和Flex混合布局实现复杂居中 在某些情况下，可能需要结合使用CSS Grid和Flex布局来实现复杂的居中效果，这种情况下，可以根据具体需求，将Grid布局和Flex布局结合使用，以达到预期的居中效果。 四、其他注意事项 在使用CSS进行居中时，还需要注意以下几点： 1. 考虑浏览器兼容性，不同的浏览器对CSS的支持程度不同，因此在编写代码时需要注意兼容性问题。 2. 避免使用绝对路径，在使用CSS进行布局时，尽量避免使用绝对路径，以免影响布局的灵活性。 3. 注意响应式设计，随着移动设备的普及，响应式设计变得越来越重要，在编写CSS代码时，需要考虑不同屏幕尺寸下的显示效果。 实现CSS中的居中显示有多种方法，可以根据具体需求和场景选择合适的方法，通过理解和掌握这些方法，可以更加灵活地控制页面元素的布局和显示效果。