CSS居中是一个常见的需求，首要分为水平居中和笔直居中。下面我会别离介绍这两种居中的办法。

水平居中

1. 文本或行内元素 运用 `textalign: center;` 特点能够很容易地将文本或行内元素水平居中。

```css .centertext { textalign: center; } ```

2. 块级元素 块级元素能够经过设置 `margin: 0 auto;` 来完成水平居中。

```css .centerblock { margin: 0 auto; } ```

假如需求居中的元素有固定宽度，这种办法很有用。假如元素没有固定宽度，需求运用其他办法。

3. Flexbox 运用Flexbox是现代布局中的一种常用办法。能够经过设置父元素的 `display: flex;` 和 `justifycontent: center;` 来完成水平居中。

```css .flexcontainer { display: flex; justifycontent: center; } ```

笔直居中

1. 单行文本 关于单行文本，能够运用 `lineheight` 特点来完成笔直居中。

```css .centertext { lineheight: 50px; / 假定父元素高度为50px / } ```

2. 多行文本或块级元素 关于多行文本或块级元素，能够运用Flexbox来完成笔直居中。

```css .flexcontainer { display: flex; alignitems: center; } ```

或许运用Flexbox的另一种办法，运用 `flexdirection: column;` 和 `justifycontent: center;`。

```css .flexcontainer { display: flex; flexdirection: column; justifycontent: center; } ```

3. 运用表格布局 尽管现在不引荐运用表格布局，但在某些情况下，它仍然是一个可行的挑选。能够经过设置 `display: tablecell;` 和 `verticalalign: middle;` 来完成笔直居中。

```css .tablecell { display: tablecell; verticalalign: middle; } ```

归纳居中

关于一起需求水平缓笔直居中的元素，能够运用Flexbox的组合。

```css.flexcontainer { display: flex; justifycontent: center; alignitems: center;}```

CSS中的居中技巧详解

在网页规划中，居中是一个常见的布局需求。无论是文本、图片仍是其他元素，居中都能使页面看起来愈加整齐和漂亮。本文将具体介绍CSS中完成居中的几种办法，帮助您轻松把握这一技术。

```html

标题

文本内容

一、水平居中

1.1 运用 margin: 0 auto

这种办法是最经典的水平居中办法之一，适用于块级元素。经过设置元素的左右margin为auto，就能使元素水平居中。

```css

.container {

width: 100%;

.box {

width: 200px;

height: 100px;

background-color: 4CAF50;

margin: 0 auto; / 水平居中 /

1.2 运用 flexbox 完成水平居中

Flexbox布局模型供给了更强壮的居中才能。经过设置父元素的display特点为flex，并运用justify-content特点，能够轻松完成水平居中。

```css

.container {

display: flex;

justify-content: center;

.box {

width: 200px;

height: 100px;

background-color: 4CAF50;

二、笔直居中

2.1 运用 line-height 完成笔直居中（适用于单行文本）

关于单行文本，能够经过设置元素的line-height特点与height特点相同，使文本笔直居中。

```css

.box {

height: 100px;

line-height: 100px;

text-align: center;

background-color: 4CAF50;

2.2 运用 flexbox 完成笔直居中

Flexbox布局模型相同能够轻松完成笔直居中。经过设置父元素的display特点为flex，并运用align-items特点，能够完成在笔直方向上的居中。

```css

.container {

display: flex;

align-items: center;

height: 200px;

background-color: 4CAF50;

.box {

width: 200px;

height: 100px;

2.3 运用 position transform 完成笔直居中

运用CSS的position特点和transform特点，能够完成在笔直方向上的居中。

```css

.container {

position: relative;

height: 200px;

background-color: 4CAF50;

.box {

position: absolute;

top: 50%;

left: 50%;

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

width: 200px;

height: 100px;

三、水平缓笔直居中

3.1 运用 flexbox 完成水平缓笔直居中

结合Flexbox布局模型，能够一起完成水平缓笔直居中。

```css

.container {

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: 4CAF50;

.box {

width: 200px;

height: 100px;

3.2 运用 grid 完成水平缓笔直居中

CSS Grid布局模型相同能够轻松完成水平缓笔直居中。

```css

.container {

display: grid;

place-items: center;

height: 200px;

background-color: 4CAF50;

.box {

width: 200px;

height: 100px;

四、呼应式规划中的居中

在呼应式规划中，居中相同重要。以下是一个运用Flexbox完成呼应式居中的示例。

```css

.container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: 4CAF50;

.box {

width: 50%;

height: 50%;

background-color: 2196F3;

在CSS中，完成居中有多种办法。经过灵活运用这些技巧，您能够轻松地完成各种居中作用。把握这些居中办法，将有助于您在网页规划中更好地布局和美化页面。

未经允许不得转载：全栈博客园 » css怎样居中