一、前言
CSS样式表中的布局一直是金字塔尖上的难题，其中，div元素的水平居中是经常遇到的问题。在这短短的800字中，我们将深入探讨CSS如何设置div水平居中，以帮助大家在日常开发中解决这个问题，提高开发效率。
二、margin属性设置
1. 肯定方式
在CSS样式表文件中，设置margin属性的左右值为auto，并将width属性设置为固定值或百分比值，这样，div元素就可以水平居中了。具体实现方式如下：
div{
width: 80%; /*固定值或百分比值*/
margin: 0 auto; /*将左右margin属性设置为auto*/
}
这种方式适用于有固定宽度的div元素或已知父级元素宽度的场景，比较简单易懂。
2. 不确定方式
但是，如果我们不确定父级元素宽度或子元素宽度，该怎么办呢？CSS3新增了一个属性“transform”，可以通过设置"translateX(-50%)"将div元素平移50%，然后设置position属性为absolute或relative，并将左侧和右侧的margin属性设置为“auto”。如下：
div{
position: relative;
left: 50%;
transform: translateX(-50%);
}
这种方式适用于父级元素宽度未知或子元素宽度随内容而变化需要自适应的场景。
三、display和text-align属性设置
1. display属性设置
除了使用margin属性外，我们也可以使用display属性来设置div元素的水平居中。具体实现方式如下：
div{
display: flex;
justify-content: center;
align-items: center;
}
这种方式使用了flex布局，可将子元素完全填充父级元素，并让子元素在父级元素水平和垂直方向上居中显示。
使用 display: inline-block; 和justify-content: center;可以在子元素中垂直居中导航页面。
div{
display: inline-block;
text-align: center;
}
2. text-align属性设置
这种方式适用于单行内联元素水平居中。具体实现方式如下：
div{
text-align: center;
}
span{
display: inline-block; /*改变行内元素的默认排列方式*/
text-align: left; /*使元素内部文字居左*/
}
三、结语
通过以上三种方式，我们可以实现div元素在父级元素中水平居中，根据不同场景自由选择适合的方式。但在实现水平居中之前，首先要保证div元素赋予了宽度width属性，否则无论采用哪种方式，都不能实现水平居中的目的。
以上就是CSS如何设置div水平居中的全部内容，相信如果你仔细的看完本文，必定受益匪浅。在日常开发中，面对不同的场景，我们可以根据需要选择不同的方式，实现对应的布局效果。