css水平居中,竖直居中技巧_html/css_WEB-ITnose
程序员文章站
2022-04-18 21:06:32
...
要点1:容器设置【position: absolute;】
要点2:容器设置【top: 50%;left: 50%;】
要点3:要知道容器实际的width和heigh(可以是预设的,也可以是运行时动态获取到的)
要点4:水平居中:margin-left = -1*(width/2),例如width是280px,则设置【margin-left:140px;】
要点5:竖直居中:margin-top = -1*(height/2),例如height是110px,则设置【margin-top:55px;】
例子如下:
html
css
#alert { position: absolute; width: 280px; top: 50%; left: 50%; margin-top: -55px; margin-left: -140px; border-radius: 5px; background: #fff; z-index: 1000000; padding: 20px; }
运行效果
运行时实际尺寸
上一篇: php数组函数定义与用法汇总
推荐阅读
-
HTML技巧篇:实现元素水平与垂直居中的几种方式
-
HTML+CSS实现单列布局水平居中布局
-
css5种实现垂直居中_html/css_WEB-ITnose
-
div的垂直居中_html/css_WEB-ITnose
-
如何让下图中的红色部分(span)内的文字相对于红色部分竖直方向上居中呢?源代码如下,图在第二楼_html/css_WEB-ITnose
-
Div在浏览器中居中显示_html/css_WEB-ITnose
-
html 上下左右都居中_html/css_WEB-ITnose
-
为什么导航栏的文本和鼠标滑上去颜色居中_html/css_WEB-ITnose
-
CSS之各种居中_html/css_WEB-ITnose
-
如何让Div始终保持水平居中或者垂直居中_html/css_WEB-ITnose