css水平垂直居中方法（一）
2024-08-28 12:36:37
第五种方法：
首先设置一个div，设置其的width与height，为了方便观察，我定义了div的背景色为red，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content { height: 240px;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>
</html>
效果如下图显示：
现在图片并没有什么居中的显示，接下来要描述的居中方法主要借助position方法，将div的position方式设置为absolute，然后可以设置其left=0，right=0，由于其有宽度，所以接下来设置margin:auto，就可以实现div的水平居中，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content { height: 240px;
width: 300px;
position: absolute;
left: 0;
right: 0;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>
</html>
效果如下图所示：
同理，由于div有高度，只要设置top=0，buttom=0，在margin为auto的作用下，可以实现其垂直居中，代码如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content { height: 240px;
width: 300px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>
</html>
效果如下所示：
这种方法思路可以单独设置元素的水平居中与垂直居中，且思路简单，但是在IE8 beta中无效
最新文章
- C# 模拟键盘操作--SendKey(),SendKeys()
- Intent组件的传参应用
- Express框架使用以及数据库公共操作类整理(Win7下的NodeJs)
- 20款时尚的 WordPress 博客主题【免费下载】
- Python正则表达式使用实例
- linux查看rpm包创建的所有目录和文件
- CentOS 下实现两台服务器之间的共享NFS
- 如何通过SecureCRT FTP上传下载文件
- Android中的主题Theme
- Windows系统编程之进程间通信
- poj 2369 Permutations 置换
- Git中.gitignore文件的使用
- python select epoll poll的解析
- android的Drawable详解
- 包建强的培训课程（7）：iOS企业级开发实战
- Windows下MySQL绿色版安装配置与使用
- ERROR - Undefined placeholders found in template:
- MySQL命令行导入导出数据
- iOS - 通过view查找所在(viewController)
- javascript中string对象方法中的slice、substring、substr的区别联系