下面给大家分享div居中的实现代码，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px;
在网页设计中，CSS（Cascading Style Sheets）是用于控制网页元素布局和样式的语言。其中，将一个元素（例如一个`div`）在页面上居中对齐是一项常见的需求。这里，我们将探讨四种不同的CSS方法来实现`div`的居中显示。
**方法一：使用margin自动填充**
这是最基础的居中方法，适用于知道元素宽度和高度的情况。通过计算元素的宽度和高度，将外边距（`margin`）设置为其差值的一半，使得元素在容器内水平和垂直居中。
```css
.parent {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.child {
width: 100px;
height: 80px;
margin: auto; /* 这会自动设置上下左右的margin */
}
```
在这个例子中，`.child`会在`.parent`内部居中，因为`margin: auto`会使浏览器自动分配等量的外边距来实现居中。
**方法二：使用绝对定位**
这种方法利用了CSS的`position`属性，将子元素设为绝对定位，并将其父元素设为相对定位。然后将子元素的`top`和`left`属性都设置为50%，并用负的外边距将其拉回到中心位置。
```css
.parent {
width: 300px;
height: 200px;
border: 1px solid #000;
position: relative; /* 设置为相对定位 */
}
.child {
width: 100px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px; /* 子元素高度的一半 */
margin-left: -50px; /* 子元素宽度的一半 */
}
```
**方法三：使用绝对定位与CSS Flexbox**
Flexbox是CSS3的一个模块，提供了灵活的布局方式。将`display`属性设置为`flex`，然后使用`align-items`和`justify-content`属性可以轻松地实现子元素的居中。
```css
.parent {
width: 300px;
height: 200px;
border: 1px solid #000;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.child {
width: 100px;
height: 80px;
}
```
**方法四：使用CSS Grid**
CSS Grid是另一个CSS3的布局模块，它提供了二维网格布局。通过设置`grid-template-columns`和`grid-template-rows`，以及`align-items`和`justify-items`，可以方便地实现居中。
```css
.parent {
width: 300px;
height: 200px;
border: 1px solid #000;
display: grid;
justify-items: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.child {
width: 100px;
height: 80px;
}
```
以上四种方法都可以有效地实现`div`元素的居中对齐，但它们各有适用的场景。在实际开发中，根据项目需求和浏览器兼容性选择最合适的方法是非常重要的。例如，对于现代浏览器，Flexbox和Grid通常是首选，而对于老版本的浏览器，可能需要依赖margin或定位方法。
