在CSS中，有多种办法能够完成div的居中，具体取决于你是想水平居中、笔直居中，仍是两者都居中。以下是几种常见的居中办法：

1. 水平居中: 运用 `margin: 0 auto;` 来完成div的水平居中。这种办法适用于固定宽度的div。 运用Flexbox: ```css .container { display: flex; justifycontent: center; } ```

2. 笔直居中: 运用Flexbox: ```css .container { display: flex; alignitems: center; } ```

3. 水平缓笔直居中: 运用Flexbox: ```css .container { display: flex; justifycontent: center; alignitems: center; } ```

4. 运用定位: 运用 `position: absolute;` 和 `transform: translate;` 来完成水平缓笔直居中。 ```css .container { position: absolute; top: 50%; left: 50%; transform: translate; } ```

5. 运用Grid布局: 运用CSS Grid布局也能够完成居中: ```css .gridcontainer { display: grid; placeitems: center; } ```

6. 运用表格布局: 运用 `display: table;` 和 `display: tablecell;` 完成居中: ```css .tablecontainer { display: table; width: 100%; height: 100%; } .tablecell { display: tablecell; textalign: center; verticalalign: middle; } ```

7. 运用writingmode: 运用 `writingmode: verticallr;` 和 `textalign: center;` 完成笔直居中: ```css .verticalcontainer { writingmode: verticallr; textalign: center; } ```

8. 运用calc函数: 运用 `calc` 函数来核算方位，完成准确居中: ```css .container { position: absolute; top: calc; left: calc; } ```

请注意，不同的居中办法适用于不同的场景和需求。你能够依据实际情况挑选最合适的办法。

CSS设置div居中的全面攻略

在网页规划中，div元素的居中显现是一个常见且重要的需求。无论是水平居中仍是笔直居中，乃至是两者的结合，CSS都供给了多种办法来完成。本文将具体介绍CSS设置div居中的办法，帮助您更好地把握这一技术。

一、水平居中div元素

1. 运用margin: 0 auto;完成水平居中

这是最简略也是最常用的办法之一。经过设置div元素的左右边距为auto，浏览器会主动将div元素水平居中。

```css

div {

width: 300px;

margin: 0 auto;

2. 运用flex布局完成水平居中

Flex布局是CSS3中的一种布局办法，它能够轻松完成水平居中。只需将父元素设置为flex布局，并将子元素设置为flex-grow特点为1，即可完成水平居中。

```css

.parent {

display: flex;

justify-content: center;

.child {

flex-grow: 1;

二、笔直居中div元素

1. 运用line-height和vertical-align完成笔直居中

这种办法适用于单行文本或单行图片的笔直居中。经过设置父元素的line-height与高度相同，并运用vertical-align特点，能够使子元素笔直居中。

```css

.parent {

height: 200px;

line-height: 200px;

text-align: center;

.child {

vertical-align: middle;

2. 运用flex布局完成笔直居中

Flex布局相同能够轻松完成笔直居中。只需将父元素设置为flex布局，并将子元素设置为align-items特点为center，即可完成笔直居中。

```css

.parent {

display: flex;

align-items: center;

justify-content: center;

height: 200px;

三、水平缓笔直一起居中div元素

1. 运用flex布局完成水平缓笔直居中

结合水平缓笔直居中的办法，咱们能够运用flex布局一起完成水平缓笔直居中。只需将父元素设置为flex布局，并设置align-items和justify-content特点为center，即可完成水平缓笔直居中。

```css

.parent {

display: flex;

align-items: center;

justify-content: center;

height: 200px;

width: 300px;

2. 运用肯定定位完成水平缓笔直居中

肯定定位也是一种完成水平缓笔直居中的办法。经过将父元素设置为相对定位，并将子元素设置为肯定定位，并设置top、left、bottom和right特点为50%，再运用margin负值调整方位，即可完成水平缓笔直居中。

```css

.parent {

position: relative;

height: 200px;

width: 300px;

.child {

position: absolute;

top: 50%;

left: 50%;

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

未经允许不得转载：全栈博客园 » css设置div居中