引导者本文目录一览：
盒子在浏览器中水平垂直居中
1、首先将html、body高度设为100%，清除默认的margin、padding值。设置盒子margin值为0 auto，实现水平居中。开启盒子的相对定位，将其下移父元素的50%。若已知盒子高度，可通过margin-top属性将其上移自身高度的一半。
2、代码：效果：垂直线高度；代码：效果：绝对水平垂直中心，位置：绝对；top：50%；左：50%；代码：效果：CSS中怎么让文字始终在页面的中间？新建一个html文件，命名为test.html，用于讲解利用CSS怎么让文字居中。
3、原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过align-items属性来达到居中。这种方式需要给父容器设置这两种属性。缺点就是css3属性，有浏览器兼容问题。
4、就需要调用resize()。$(function(){ (window).resize()；})；此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。
5、在黑马程序员学习时候就会有老师教过，知道盒子的自身长度和宽度，其实解决的思路是这样的：首们需要position：absolute；绝对定位。再使用margin负值的方法。负值的大小为此盒子自身宽度高度除以二。
6、该层垂直居中于浏览器中的方法是margin：50%、50%。根据刷刷题查询得知，使用margin：50%、50%是一种使层垂直居中于浏览器中的常见方法。这个值将层的左右外边距设置为相同的值，从而使层在其父元素中垂直居中。
让一个盒子水平垂直居中的一些方法
可以将伸缩容器的额外空间分发给其伸缩项目或将他们缩小以防止伸缩项目溢出。
首先创建一个盒子，并在中间输入文字信息。然后对盒子添加了边框颜色后，这时文字在左侧第1行位置。输入text-align 这个文字的对齐样式，然后在属性中输入center中间的意思，就是将文字在水平位置居中。
使用display：table-cell和vertical-align display：table-cell；vertical-align：middle；原理就是通过将父容器转换为一个表格单元格来显示，再通过将表格单元格内容垂直居中。使用时需要将两种属性都设置到父容器身上。
首先将html、body高度设为100%，清除默认的margin、padding值。设置盒子margin值为0 auto，实现水平居中。开启盒子的相对定位，将其下移父元素的50%。
html的元素水平垂直居中应该怎么设置
首先创建一个盒子，并在中间输入文字信息。然后对盒子添加了边框颜色后，这时文字在左侧第1行位置。输入text-align 这个文字的对齐样式，然后在属性中输入center中间的意思，就是将文字在水平位置居中。
可以使用“text-align”属性让文字水平居中，使用“ling-height”属性让文字垂直居中。
div是200px，就设置200px，如果你的div或者其他标签是400px，就设置400px。最后，再来预览效果，文字已经水平垂直居中了。
div怎样居中?HTML中div怎样居中呢?
1、。创建一个新的html文件，命名为test.html，解释CSS如何使一个div居中。在test.html文件中，使用div标签创建一个模块来测试居中效果。
2、新建一个html文件，命名为test.html，用于讲解CSS怎样让一个div居中。在test.html文件中，使用div标签创建一个模块，用于测试居中效果。
3、创建一个新的html文件，向body标签添加一个div标签，并在div标签中输入文本。这里以“演示文本”为例，设置div标签的宽度、高度和背景色属性，属性值分别为200、100和灰度。
