CSS之居中

最新推荐文章于 2024-06-21 00:05:48 发布

xiaobai_dreamWeaver

最新推荐文章于 2024-06-21 00:05:48 发布

阅读量774

点赞数 1

分类专栏：前端交流学习文章标签： CSS 居中

本文链接：https://blog.csdn.net/xiaobai_dreamWeaver/article/details/53895107

版权

前端交流学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在学习CSS过程中,关于CSS居中的方法有很多,每种方法适用的情况也不大相同。我平常使用的几种,做个小结,要是遇到了其它的,以后再添加.

1.居中的盒子不设置宽度和高度

【1】原始情况:

<!DOCTYPE html>

<html>

<head>

</head>

body div{margin:0;padding:0;}

body{border:1px solid red;}

#box1{

}

</style>

<body>

</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居中的方法非常多,在什么情况下使用什么方法,比如居中对后面元素的影响等等都是需要考虑的!

xiaobai_dreamWeaver

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之居中

在学习CSS过程中,关于CSS居中的方法有很多,每种方法适用的情况也不大相同。我平常使用的几种,做个小结,要是遇到了其它的,以后再添加.1.居中的盒子不设置宽度和高度【1】原始情况: CSS-居中body div{margin:0;padding:0;}body{border:1px solid red;}#box1{}
复制链接

扫一扫