div上下左右居中
2015-09-07 09:45
441 查看
<style
type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>让层垂直居中于浏览器窗口</div>
其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写
注:上面的是一般用于垂直居中与浏览器,想解决div垂直居中与外层div的话,只需要给外层div加上position:relative;就好了;记住,外层div要设定高度和宽度
type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>让层垂直居中于浏览器窗口</div>
其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写
注:上面的是一般用于垂直居中与浏览器,想解决div垂直居中与外层div的话,只需要给外层div加上position:relative;就好了;记住,外层div要设定高度和宽度
相关文章推荐
- 黄聪:TinyMCE 4 增强 添加样式、按钮、字体、下拉菜单和弹出式窗口
- css 选择器如何选择
- css.day01
- class属性中为什会添加非样式的属性值?
- CSS3选择器
- CSS3的布局学习
- CSS3的布局学习
- CSS3弹性盒模型
- HTML+CSS入门
- css中背景 字体 文体属性练习
- css制作三角形,下拉框三角形
- [持续更新]CSS3学习笔记(一)伪类选择器&自定义字体&背景图片
- 关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释
- CSS,给我们不一样的体验
- CSS3:3D转换
- CSS从图标集里截取某一图标
- 浅谈css中的position
- 使用CSS3配合IE滤镜实现渐变和投影的效果
- 举例详解CSS中position属性的使用
- 如何配置一个软件系统的总体样式(用qss文件)