聊聊css水平垂直居中那些事_html/css_WEB-ITnose
程序员文章站
2022-04-09 23:45:01
...
1、水平居中实现方法
我是一个水平居中的div
/*方法1*/.demo{width: 960px;margin: 0 auto;} /*方法2*/.demo{width: 960px;height: 400px;background: #f00;position: relative;left: 50%;margin-left: -480px;}
2、水平垂直居中实现方法
我是一个水平垂直居中的div
/*方法1:无兼容性问题*/.demo{width: 400px;height: 400px;background: #f00;position: absolute;top: 50%;left: 50%;margin: -200px 0 0 -200px;}
/*方法2: 在ie7浏览器下不支持*/.demo{width: 400px;height: 400px;background: #f00;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
推荐阅读
-
css5种实现垂直居中_html/css_WEB-ITnose
-
div的垂直居中_html/css_WEB-ITnose
-
如何让Div始终保持水平居中或者垂直居中_html/css_WEB-ITnose
-
CSS秘密花园: 垂直居中_html/css_WEB-ITnose
-
icon@font-face那些事_html/css_WEB-ITnose
-
CSS秘密花园: 垂直居中_html/css_WEB-ITnose
-
css如何将div实现全屏水平垂直居中_html/css_WEB-ITnose
-
一问就蒙(1)垂直居中_html/css_WEB-ITnose
-
水平居中--行内元素、定宽块、不定宽块_html/css_WEB-ITnose
-
div的垂直居中_html/css_WEB-ITnose