CSS之居中
2016-12-27 14:13
288 查看
在学习CSS过程中,关于CSS居中的方法有很多,每种方法适用的情况也不大相同。我平常使用的几种,做个小结,要是遇到了其它的,以后再添加.
1.居中的盒子不设置宽度和高度
【1】原始情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-居中</title>
</head>
<style type="text/css">
body div{margin:0;padding:0;}
body{border:1px solid red;}
#box1{
}
</style>
<body>
<div id="box1">居中</div>
<div id="box2">盒子1对盒子2的影响</div>
</body>
</html>
【2】相对定位居中
#box1{
position:absolute;
left:50%;
top:50%;
}
问题1:box1是相对于浏览器定位,它会跑出body这个大盒子.
解决方法:设置body{position:relative;}
问题2:body大盒子没有设置宽度和高度,而box1是相对定位,body的高度实际上是box2撑开的高度.
解决方法:【1】设置body固定宽高
问题3:感觉没有实现左右 上下相同的居中-box1自身的宽高影响
解决方法:根据浏览器默认的box1宽高来计算出相对定位的left和top.
#box1{
position:absolute;
left:42%;
top:41%;
}
【3】先水平居中,再根据box1高度用padding去调整高度居中
#box1{
text-align:center; //水平居中
padding-top:18px;
}
【4】利用margin来居中
#box1{
padding-left:43%;
padding-top:41%;
}
问题4:没有居中-body与box1没有设置宽高,使得padding调整的比例又问题
解决方法1:
#box1{
padding-left:47%;
padding-top:4%;
}
解决方法2:设置body宽高
body{
width:200px;
height: 200px;
border:1px solid red;
}
#box1{
padding-left:42%;
padding-top:41%;
}
【5】vertical-align:middle;-可以去搜下资料看看,网上比较多.
所以可以通过box2和box1相互对齐来设置box1居中;
body{
width:200px;
height:200px;
border:1px solid red;
}
#box1{
padding-left:88px;
display: inline-block;
vertical-align:middle;
}
#box2{
display: inline-block;
width:0px;
height:100%;
vertical-align:middle;
}
【6】利用外层body大盒子行高距来居中
body{
width:200px;
height:200px;
line-height:200px;
border:1px solid red;
}
#box1{
text-align:center;
}
注:在居中的盒子没有设置宽高的时候 margin:0 auto;是无法水平居中的
2.居中的盒子设置了宽高
【1】line-height和margin:0 auto;设置垂直和水平居中
body div{margin:0;padding:0;}
body{
width:200px;
height:200px;
line-height:200px;
border:1px solid red;
}
#box1{
width:40px;
height:20px;
margin:0 auto;
}
注:在居中的盒子设置了宽高的时候 text-align:center;是无法水平居中的
【2】利用margin或者padding调整水平居中
body div{margin:0;padding:0;}
body{
width:200px;
height:200px;
line-height:200px;
border:1px solid red;
}
#box1{
width:40px;
height:20px;
margin-left:43%;
}
【3】margin或者padding直接设置居中
body{
width:200px;
height:200px;
border:1px solid red;
}
#box1{
width:40px;
height:20px;
margin-top:41%;
margin-left:43%;
}
【4】相对定位
body{
width:200px;
height:200px;
border:1px solid red;
position:relative;
}
#box1{
position:absolute;
left:43%;
top:46%;
}
可以看到CSS居中的方法非常多,在什么情况下使用什么方法,比如居中对后面元素的影响等等都是需要考虑的!
1.居中的盒子不设置宽度和高度
【1】原始情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-居中</title>
</head>
<style type="text/css">
body div{margin:0;padding:0;}
body{border:1px solid red;}
#box1{
}
</style>
<body>
<div id="box1">居中</div>
<div id="box2">盒子1对盒子2的影响</div>
</body>
</html>
【2】相对定位居中
#box1{
position:absolute;
left:50%;
top:50%;
}
问题1:box1是相对于浏览器定位,它会跑出body这个大盒子.
解决方法:设置body{position:relative;}
问题2:body大盒子没有设置宽度和高度,而box1是相对定位,body的高度实际上是box2撑开的高度.
解决方法:【1】设置body固定宽高
问题3:感觉没有实现左右 上下相同的居中-box1自身的宽高影响
解决方法:根据浏览器默认的box1宽高来计算出相对定位的left和top.
#box1{
position:absolute;
left:42%;
top:41%;
}
【3】先水平居中,再根据box1高度用padding去调整高度居中
#box1{
text-align:center; //水平居中
padding-top:18px;
}
【4】利用margin来居中
#box1{
padding-left:43%;
padding-top:41%;
}
问题4:没有居中-body与box1没有设置宽高,使得padding调整的比例又问题
解决方法1:
#box1{
padding-left:47%;
padding-top:4%;
}
解决方法2:设置body宽高
body{
width:200px;
height: 200px;
border:1px solid red;
}
#box1{
padding-left:42%;
padding-top:41%;
}
【5】vertical-align:middle;-可以去搜下资料看看,网上比较多.
所以可以通过box2和box1相互对齐来设置box1居中;
body{
width:200px;
height:200px;
border:1px solid red;
}
#box1{
padding-left:88px;
display: inline-block;
vertical-align:middle;
}
#box2{
display: inline-block;
width:0px;
height:100%;
vertical-align:middle;
}
【6】利用外层body大盒子行高距来居中
body{
width:200px;
height:200px;
line-height:200px;
border:1px solid red;
}
#box1{
text-align:center;
}
注:在居中的盒子没有设置宽高的时候 margin:0 auto;是无法水平居中的
2.居中的盒子设置了宽高
【1】line-height和margin:0 auto;设置垂直和水平居中
body div{margin:0;padding:0;}
body{
width:200px;
height:200px;
line-height:200px;
border:1px solid red;
}
#box1{
width:40px;
height:20px;
margin:0 auto;
}
注:在居中的盒子设置了宽高的时候 text-align:center;是无法水平居中的
【2】利用margin或者padding调整水平居中
body div{margin:0;padding:0;}
body{
width:200px;
height:200px;
line-height:200px;
border:1px solid red;
}
#box1{
width:40px;
height:20px;
margin-left:43%;
}
【3】margin或者padding直接设置居中
body{
width:200px;
height:200px;
border:1px solid red;
}
#box1{
width:40px;
height:20px;
margin-top:41%;
margin-left:43%;
}
【4】相对定位
body{
width:200px;
height:200px;
border:1px solid red;
position:relative;
}
#box1{
position:absolute;
left:43%;
top:46%;
}
可以看到CSS居中的方法非常多,在什么情况下使用什么方法,比如居中对后面元素的影响等等都是需要考虑的!
相关文章推荐
- css 解决方案-图片垂直居中
- 浅谈CSS水平居中&垂直居中
- 一个自动居中的导航条实例与相关问题 DIV+CSS
- 使用CSS让文本内容垂直居中
- CSS设置行内元素的水平居中
- div+css在屏幕居中布局
- CSS居中的常用手段
- CSS实现完美垂直居中
- css居中的几种情形
- CSS 让页面内容居中显示
- css-div下内容垂直居中
- CSS实现垂直居中
- CSS垂直居中的11种实现方式
- 用CSS使DIV水平居中
- css的div垂直居中的方法,百分比div垂直居中
- css自适应宽度 多种方法实现宽度自适应的水平居中
- 关于CSS制作水平/垂直居中对齐问题
- css水平居中(一)
- CSS中怎么让DIV居中
- css未盒子div居中的多种方法