热搜:NVER node 开发 php

css水平居中,竖直居中技巧_html/css_WEB-ITnose

2024-11-10 13:20:02
css水平居中,竖直居中技巧_html/css_WEB-ITnose

要点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

    信息提示    GOOD            确定    

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;    }

 运行效果

运行时实际尺寸