简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

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

WBOY
发布： 2016-06-24 11:46:58
原创
1130 人浏览过

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

<html><head></head><body><div id="alert">    <div class="alert-header" style="display: none;">信息提示</div>    <div class="alert-message">GOOD</div>    <div class="alert-footer">        <div class="btn-close">确定</div>    </div></div></body></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;    }
登录后复制

 运行效果

运行时实际尺寸

相关标签：
css水平居中，竖直居中技巧
来源：php.cn
上一篇：iReport-关于部署在weblogic中的项目用IE访问页面加载慢但是用火狐或者谷歌浏览器访问很快的问题_html/css_WEB-ITnose 下一篇：HTML5属性_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
垂直旋转的表格标题，居中+底部对齐，跨浏览器 我的表格带有旋转标题，在Chrome中看起来符合预期，但在Firefox中却不是。Chromev108（垂直底部，水平中间）✅Firefoxv107（垂直中间，水平右）❌如何让它们...
来自于 2024-04-04 16:45:25
0
1
330
重新写的标题：在改变大小的情况下，水平和垂直居中一个固定的HTML方形或圆形元素 如何使尺寸变化的方形或圆形固定html元素水平和垂直居中？我认为宽度和高度必须保持相等这一事实带来了困难。
来自于 2024-04-04 12:31:51
0
1
322
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！