css纵横居中解决方案

时间：2023-03-31 01:19:00 CSS

前面写的是：纵横居中就是纵横两边都居中，也就是在视觉效果上，是在view的中间。下面说一下CSS1中垂直和水平居中常用的几种解决方案：1.设置外层div的显示模式为table，即display:table；2、设置内层div的显示方式设置为table-ceil，即display:table-ceil；这样，我们就可以把这个html结构看成是一个表格，表格中的一个小单元格。由于表格中只有一个ceil，它会自动展开整个表格。为其设置宽高无效。它的宽度和高度是包装器的宽度和高度。ceil中的内容可以自动垂直居中。其中：垂直居中：usingvertical-align:middle；水平居中：使用text-align:center;具体代码如下：包装器{显示：表格；宽度：400px；高度：200px；背景色：红色；}.ceil{显示：表格单元格；垂直对齐：中间；背景色：蓝色；文本对齐：居中；}效果如下：然后我们把content中的内容加长看看效果：从上面可以看出，wrapper应该是红色背景，但是现在整个ceil撑起了整个form，所以包装纸的背景被覆盖，呈现蓝色。优点：内容可以动态改变高度（不需要在CSS中定义）。当wrapper空间不够时，内容不会被截断，也就是说内容会自动展开wrapper缺点：实现起来比较麻烦，需要额外嵌套标签。方法二：绝对定位法。1、我们把需要垂直居中和水平居中的位置设置为absolute。2.设置top为0，left为0，margin为宽高一半的负值。即先把盒子放在中间，然后微调：HelloWorld!

.container{位置：相对的;宽度：400px；高度：300px；背景颜色：红色；}.content{位置：绝对；宽度：100px；高度：100px；背景色：蓝色；顶部：50%；左：50%；-50像素；//一半高度，视实际情况而定margin-left:-50px;//一半宽度，视实际情况而定}注意：绝对定位是相对于最近的非静态祖先元素，所以我们需要在其相对定位的元素上定义display属性。还有文字溢出时：优点：适用于所有没有嵌套标签的浏览器缺点：由于高度有限，当空间不够时，内容会溢出。这时候我们可以设置：overflow:auto；这时候溢出的时候会出现一个滚动条。方法三：在方法二的基础上进行改动，将margin的负值改为transform和translate.container{position:relative;宽度：400px；高度：300px；背景颜色：红色；}.content{位置：绝对；背景色：蓝色；顶部：50%；左：50%；transform:translate(-50%,-50%);}优点，无需定义宽高，灵活性高缺点：还是要注意截断问题方法四：该方法使用固定宽高的position:absolute分区这个div设置为top:0；底部：0；。但是因为它有一个固定的高度，所以它不能在顶部和底部都为0，所以margin:auto;将它居中。使用保证金：自动；垂直居中块级元素很简单。内容在这里

.content{position:absolute;顶部：0；底部：0；左：0；右：0；保证金：自动；高度：240px；宽度：70%；}优点：简单缺点：在IE（IE8beta）中无效当空间不够时，内容会被截断，但不会出现滚动条方法五：最常用的单行文本居中该方法只能居中单个行文本。1.设置line-height为对象的高度值，使文本垂直居中2.设置text-align为center，使文本水平居中Helloworld!