CSS盒子水平居中
来源:互联网 发布:文件管理程序软件 编辑:程序博客网 时间:2024/06/06 14:29
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.big{width: 700px;height: 400px;margin: 100px auto;background-color: pink;position: relative;}.small{width: 100px;height: 30px;background-color: black;position: absolute;left: 50%;}</style></head><body><div class="big"><div class="small"></div></div></body></html>
此时小黑盒子的左边框居中,要让整体居中,还得加上 margin-left:负的小黑盒子width的一半;margin-left: -50px;之后就是水平居中了,竖直方向同理
(外边距margin取负数,大小为width/height的一半,再加上top: 50%; left: 50%,就可以水平垂直居中了。)
阅读全文
0 0
- CSS盒子水平居中
- 自适应宽度盒子水平垂直居中css
- CSS居中(一)--div盒子水平垂直居中
- CSS样式使DIV盒子垂直水平居中
- css 盒子水平居中(确定宽度和不确定宽度)
- css就可以让模态框内容盒子水平上下居中
- css让div水平垂直居中,用弹性盒子
- 盒子垂直居中css
- CSS水平垂直居中
- 解决 CSS 水平居中
- CSS 水平居中
- css水平垂直居中
- css水平居中
- css div水平居中
- CSS 水平垂直居中
- CSS 水平居中设置
- CSS水平居中
- CSS水平垂直居中
- android studio手机连接本地服务器测试
- Gradle记录 运行到强制刷新依赖01
- 下载基因组注释gtf文件和下载参考基因组序列
- Angular4根据url地址读取到文件中的内容
- Mac固定虚拟机IP
- CSS盒子水平居中
- ES7+ES8
- 一些功能界面的实现
- sql 查询子级和父级
- Android窗口管理分析(4):Android View绘制内存的分配、传递、使用
- python之fabric(一):环境env
- NodeJS 模板 -- jade
- 虚函数、纯虚函数、虚基类
- php nl2br()与$_POST用法