html css 元素居中的方法
2014-02-19 13:41
676 查看
html元素 水平居中 于 其父级元素的方法:
方法1:
方法2:
html元素 垂直居中 于 其父级元素的方法:
html元素 水平垂直居中 于 其父级元素的方法:
方法1:
方法2:
完整代码:
效果图:
方法1:
<div class="wrap"> <div class="left-right-middle1">左右居中方法1</div> </div>
html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .left-right-middle1{ width:200px; background-color:#69F; margin:0 auto; }
方法2:
<div class="wrap"> <div class="left-right-middle2">左右居中方法2</div> </div>
html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .left-right-middle2{ width:200px; background-color:#69F; left:50%; margin-left:-100px; }
html元素 垂直居中 于 其父级元素的方法:
<div class="wrap"> <div class="top-bottom-middle">上下居中</div> </div>
html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .top-bottom-middle{ height:200px; background-color:#69F; top:50%; margin-top:-100px; }
html元素 水平垂直居中 于 其父级元素的方法:
方法1:
<div class="wrap"> <div class="all-middle1">上下左右居中方法1</div> </div>
html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .all-middle1{ width:200px; height:200px; background-color:#69F; top:50%; margin:-100px auto 0; }
方法2:
<div class="wrap"> <div class="all-middle2">上下左右居中方法2</div> </div>
html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .all-middle2{ width:200px; height:200px; background-color:#69F; top:50%; left:50%; margin:-100px 0 0 -100px; }
完整代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>Div Middle</title>
<style type="text/css">
html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .left-right-middle1{ width:200px; background-color:#69F; margin:0 auto; }
.left-right-middle2{
width:200px;
background-color:#69F;
left:50%;
margin-left:-100px;
}
.top-bottom-middle{
height:200px;
background-color:#69F;
top:50%;
margin-top:-100px;
}
.all-middle1{
width:200px;
height:200px;
background-color:#69F;
top:50%;
margin:-100px auto 0;
}
.all-middle2{
width:200px;
height:200px;
background-color:#69F;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="wrap"> <div class="left-right-middle1">左右居中方法1</div> </div>
<div class="wrap"> <div class="left-right-middle2">左右居中方法2</div> </div>
<div class="wrap"> <div class="top-bottom-middle">上下居中</div> </div>
<div class="wrap"> <div class="all-middle1">上下左右居中方法1</div> </div>
<div class="wrap"> <div class="all-middle2">上下左右居中方法2</div> </div>
</body>
</html>
效果图:
相关文章推荐
- html css 元素居中的方法 分类: html css 元素居中 网页居中 居中 2014-02-19 13:41 240人阅读 评论(0) 收藏
- css清除浮动
- CSS3 Transform(转换)
- 关于css清除元素浮动的方法总结(overflow clear floatfix)
- 哀悼网页CSS 只有IE支持,FF不支持
- 使position:fixed样式水平滚动的方法
- 使用CSS样式position:fixed水平滚动的方法
- 使用CSS Shapes的Regions创建更好的阅读体验
- 图解CSS的padding,margin,border属性
- CSS中zoom作用
- ios开发---将TableViewCell选中样式改为无色
- css3隔行变换色测试
- CSS优先级
- WPF应用的一些小总结(模板、样式,上下文)
- html css 如何将表头固定(转)
- 转载css层级优先级。
- 通过css控制HTML文本框中的文字垂直居中
- 纯CSS实现的Loading效果
- 用css控制表格的内容,使其在固定宽度后换行。
- HTML 中自定义checkbox样式