css上下垂直居中,html5上下左右居中

　　在CSS中，你得吐出来，用margin:0 auto；它可以水平居中，但margin: auto 0不能垂直居中。

　　这主要是因为父控件(即控件本身)的位置不正确。直接看代码。首先，你需要对父控件使用相对布局，然后你需要对子控件使用绝对布局，并使用top、bottom属性，结合margin:auto 0；就能达到效果。容器-垂直{位置：相对；宽度：100%；高度：200px背景：deepskyblue边距-底部：20px} .容器-垂直-项目{位置：绝对；宽度：130px高度：80px文本对齐：居中；背景：黄色；行高：80pxtop:0；底部：0；边距：自动0；}

　　居中。png垂直

　　水平垂直方向居中

　　有了5.2的经验，我们可以尝试将子控件的左右、上下属性设置为0，margin:auto；所有四个方向的自动外部边距。可以达到这个效果。需要注意的子控件必须是display:block；属性。

　　看代码。容器-水平-垂直{位置：相对；宽度：100%；高度：200px背景：deepskyblue边距-底部：20px} .容器-水平-垂直-项目{位置：绝对；宽度：150px高度：80px背景：黄色；行高：80px文本对齐：居中；top:0；左：0；底部：0；右：0；边距：自动；}

　　总结：这个方案对于解决一些不复杂的页面布局还是挺不错的，可以适配任何界面和几乎所有浏览器。然而，对于非常复杂的页面，可能需要其他解决方案，但我们也可以从这种想法中获得启示。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。