css 如何使 div 居中
在网页制作中，我们经常需要把一个 div 元素居中显示，让页面更美观、更易读。本文将介绍 CSS 中几种实现 div 居中的方式。
一、使用 text-align 居中
text-align 属性主要用于设置块级元素中行内内容的对齐方式。当 text-align 属性的值为 center 时，元素内容就会水平居中。
让 div 居中，可以将 div 元素的宽度设置为一个固定的值，并将其 margin 属性设置为 auto，这样 div 就会出现在其父元素的中央位置。
立即学习“前端免费学习笔记（深入）”；
CSS 代码如下：
div {
width: 300px;
margin: 0 auto;
text-align: center;
}上述 CSS 代码将 div 的宽度设置为 300px，margin 属性设置为 0 auto，让 div 水平居中，同时 text-align 属性设置为 center，让 div 的内容也水平居中。
二、使用 flex 居中
flex 是 CSS3 引入的一种布局方式，flex 布局提供了多个属性，可以方便地设置网格、对齐和排序等功能，非常适合响应式布局。
要让 div 使用 flex 居中，可以给其父元素设置 display: flex，并设置 justify-content 和 align-items 等属性。
CSS 代码如下：
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container div {
width: 300px;
height: 200px;
}上述代码中，.container 元素被设置为 display: flex，用于生成一个弹性容器。justify-content 属性设置为 center，让所有子元素水平居中；align-items 属性设置为 center，让所有子元素垂直居中。
三、使用绝对定位居中
使用绝对定位可以让 div 元素在其父元素中居中显示。具体步骤如下：
将 div 元素的 position 属性设置为 absolute；
将 div 元素的 top 和 left 属性设置为 0；
将 div 元素的 margin 属性设置为 auto；
将父元素的 position 属性设置为 relative。
CSS 代码如下：
.parent {
position: relative;
height: 100%;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 200px;
}上述代码中，.parent 元素设置为 position: relative，用于相对定位。.child 元素设置为 position: absolute，用于绝对定位。top、left、right、bottom 属性设置为 0，让 .child 元素占据整个 .parent 元素。margin 值设为 auto，让 .child 元素水平和垂直均居中。
综上所述，以上是三种常见的 CSS 居中方式。每种方式各有优缺点，具体应用需要根据实际情况来选择。
