1. 前言
在CSS布局中，居中是一个非常重要的操作，尤其是在响应式设计中更是不可或缺。在本文中，将介绍如何在CSS中将div设置为居中。
2. 水平居中
2.1 文本水平居中
如果要将一段文本水平居中，可以使用text-align属性。例如，以下代码可以将一段居左文本水平居中：
.container {
text-align: center;
}
注： 上述代码只会影响该元素内部的文本。
2.2 块元素水平居中
如果要将块级元素水平居中，可以使用margin属性，将左右的margin设置为auto。例如，以下代码可以将一个宽度为200px的div元素水平居中：
.container {
width: 200px;
margin: 0 auto;
}
这是因为设置了margin-left和margin-right为auto后，浏览器会自动将左右margin平分，从而实现水平居中效果。
注： 如果父容器的宽度为100%且子元素宽度小于父容器宽度，则需要设置子元素的宽度为100%。
2.3 flexbox实现水平居中
flexbox是一个非常强大和流行的布局模式，可以很容易地实现水平和垂直的居中效果。以下示例可以使用flexbox将div元素水平居中：
.container {
display: flex;
justify-content: center;
align-items: center;
}
flexbox将子元素放在一个弹性容器中，通过设置justify-content和align-items属性，可以轻松地实现水平和垂直居中效果。
3. 垂直居中
3.1 行高垂直居中
如果要将一行文本垂直居中，可以使用line-height属性。例如，以下代码可以将一行居左文本垂直居中：
.container {
line-height: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
通过设置父容器的line-height属性，子元素的显示区域就会居中，然后通过设置子元素的display和vertical-align属性，实现垂直居中效果。
3.2 table-cell垂直居中
如果要将任何元素垂直居中，可以使用Table-Cell技巧。该技术涉及使用display:table-cell，vertical-align: middle来垂直居中。
.container {
display: table-cell;
vertical-align: middle;
}
这使得容器垂直居中了，但是你需要注意你的容器必须在一个display:table的父级元素内，否则会出现奇怪的布局错误。
3.3 flexbox实现垂直居中
如前所述，flexbox实现垂直方向的布局是非常容易和方便的。以下示例可以使用flexbox将子元素垂直居中：
.container {
display: flex;
justify-content: center;
flex-direction: column;
}
这里将容器的flex-direction属性设置为column，意思是所有子节点将竖着放置。
4. 水平和垂直居中
如果要同时将一个div元素的水平和垂直居中，可以使用2.2和3.3中所述的技巧。例如，以下代码可以将一个200px * 200px的div元素水平和垂直居中：
.container {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
}
5. 总结
在CSS中将div设置为居中是CSS布局中不可或缺的一部分，学好几种方法后，在制作响应式布局时，就可以用一些方法来应对限制。可以根据具体的布局选择适合自己的方法实现居中布局。