网页元素居中攻略记_(3)已知宽高元素水平垂直居中
2015-05-31 11:04
423 查看
已知宽高元素水平垂直居中
方案
使用了position的absolute属来实现,在上篇文章的垂直居中的基础上加上水平居中代码
index.html<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>已知宽高元素水平垂直居中</title> <style> #container { position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -250px; height: 500px; width: 500px; background: #000; } /*先把块拉到页面的50%处,因为顶对齐在(50%,50%),所以必须拉回元素的一半大小,才能实现完全居中*/ </style> </head> <body> <div id="container"></div> </body> </html>
相关文章推荐
- 正则表达式-笔记
- 深入理解计算机系统 perflab 程序性能优化实验
- Hadoop学习---第四篇Mapreducer里的Partitioner
- OSS实现多文件多线程的断点下载(java)
- thinkphp内置分页样式与Bootstrap分页样式整合
- 使用FileUtils来简化文件操作
- solrCloud部署
- Single Number II -- leetcode
- 阳山书院半山居会见老友火星人
- linux命令行常用热键
- IOS CoreText --- 图文混排之代码封装
- SRS文档
- 运算符
- 决定:现公司准备另谋出路,还是往前坑里再走一步
- 【转】JQuery的父,子,兄弟节点查找方法
- Java知多少(78)Java向量(Vector)及其应用
- FBI教你读心术 读书笔记
- 路径中斜杠/与反斜杠\ 的区别
- HC-05蓝牙模块的使用
- 如何从ST官网上下载资源STM32标准库Standard Peripheral LibrariesV3.5.0