CSS-水平和垂直居中的总结
2017-02-26 10:16
781 查看
在实际开发过程中,经常能够遇到需要居中的布局,包括水平居中和垂直居中。在CSS中,水平居中还算比较容易解决,使用 text-align: center 和 margin: 0 auto 就能够解决大部分的需求,但是垂直居中比较麻烦一点儿,以为跟水平居中相对应的 vertical-align: middle 和 margin: auto 0 使用起来是很难有达到预期的效果的,尤其是 margin: auto 0 根本就起不到垂直居中的效果。对于居中的方案,我多少知道一些,但是却没有真正的总结过相关的知识和技巧。所以,本着为了巩固自己的基础知识的目的,特意在网上查阅了相关的资料,并亲自试验后,特意总结下来。
效果图:
![](https://img-blog.csdn.net/20170311235038143?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhxMjAwNTA5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
从图中可以看出来,text-align: center这一属性对于 span, input, img 三种行内和行内块元素都生效了。对于p 和 div 这种块级元素来说是无效的。
效果如下:
![](https://img-blog.csdn.net/20170312000023936?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhxMjAwNTA5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
可以看出,对于块级元素 p 和 div 来说,水平居中了。
效果:
![](https://img-blog.csdn.net/20170312220855338?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhxMjAwNTA5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
效果:
![](https://img-blog.csdn.net/20170312221817466?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhxMjAwNTA5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
效果同上。
效果
![](https://img-blog.csdn.net/20170312224356933?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhxMjAwNTA5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
效果
![](https://img-blog.csdn.net/20170312224705529?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhxMjAwNTA5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170312225011366?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhxMjAwNTA5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
暂时就这么多吧,以后有更好的办法,都会持续更新的。。。。
水平居中
行内元素和行内块元素——text-align: center
<!-- HTML --> <div class="parent"> <span class="child">[span]居中居中居中居中居中居中居中居中居中</span> <p class="child">[p]居中居中居中居中居中居中居中居中居中</p> <div class="child">[div]居中居中居中居中居中居中居中居中居中</div> <input type="text" name="text" value="[input]居中居中居中居中居中居中居中居中居中"><br> <img src="img/1.jpg"/> </div> <!-- CSS --> .parent { height: 300px; background-color: red; text-align: center; } .child { background-color: green; } .parent img { width: 100px; height: 100px; } div.child { width: 100px; height: 100px; } p.child { width: 100px; height: 100px; }
效果图:
从图中可以看出来,text-align: center这一属性对于 span, input, img 三种行内和行内块元素都生效了。对于p 和 div 这种块级元素来说是无效的。
固定宽度的块级元素——margin: 0 auto
<!-- HTML --> <div class="parent"> <span class="child">[span]居中居中居中居中居中居中居中居中居中</span> <p class="child">[p]居中居中居中居中居中居中居中居中居中</p> <div class="child">[div]居中居中居中居中居中居中居中居中居中</div> <input type="text" name="text" value="[input]居中居中居中居中居中居中居中居中居中"><br> <img src="img/1.jpg"/> </div> <!-- CSS --> .parent { height: 300px; background-color: red; } .child { background-color: green; margin: 0 auto; } .parent img { width: 100px; height: 100px; } div.child { width: 100px; height: 100px; } p.child { width: 100px; height: 100px; }
效果如下:
可以看出,对于块级元素 p 和 div 来说,水平居中了。
不固定宽度的块级元素——无法设置居中
因为在这种情况下,当块级元素没有设定宽度时,其宽度自动拉伸为父元素的宽度。水平垂直居中
单行文本——line-height: height+text-align:center
高度固定的块级元素——绝对定位+margin设定负值
<!--HTML--> <div class="parent"> <div class="child">[div]居中</div> </div> <!--CSS--> .parent { width: 400px; height: 400px; background-color: red; position: relative; // 父元素相对定位 } .child { background-color: green; width: 100px; height: 100px; position: absolute;// 子元素绝对定位 top: 50%; // 垂直位置设为50% left: 50%;// 水平位置设为50% margin-top: -50px; // margin-top设为高度的一半 margin-left: -50px;// margin-left设为高度的一半 }
效果:
高度固定的块级元素——父元素设置display: table-cell和vertical-align: middle
<!--HTML--> <div class="parent"> <div class="child">[div]居中</div> </div> <!--CSS--> .parent { width: 400px; height: 400px; background-color: red; display: table-cell; vertical-align: middle; } .child { background-color: green; width: 200px; height: 200px; margin: 0 auto; }
高度固定的块级元素——绝对定位和margin: auto及left=right=top=bottom=0
<!--HTML--> <div class="parent"> <div class="child">[div]居中</div> </div> <!--CSS--> .parent { width: 400px; height: 400px; background-color: red; position: relatvie; } .child { background-color: green; width: 200px; height: 200px; position: relative; margin: auto; left: 0; right: 0; top: 0; bottom: 0; }
图片——绝对定位+margin: auto
<!--HTML--> <div class="parent"> <img class="child" src="img/1.jpg" style="width: 200px;height: 200px"> </div> <!--CSS--> .parent { width: 400px; height: 400px; background-color: red; position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin:auto; }
效果:
图片——父元素设置display: table-cell和vertical-align: middle
<!--HTML--> <div class="parent"> <img class="child" src="img/1.jpg" style="width: 200px;height: 200px"> </div> <!--CSS--> .parent { width: 400px; height: 400px; background-color: red; display: table-cell; vertical-align: middle; }
效果同上。
高度不固定的块级元素—绝对定位和transform
<!--HTML--> <div class="parent"> <div class="child">居中居中居中居中居中居中居中居中</div> </div> <!--CSS--> .parent { width: 400px; height: 400px; background-color: red; position: relative; } .child { background-color: green; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
效果
高度不固定的块级元素—flex布局1
<!--HTML--> <div class="parent"> <div class="child">居中居中居中居中居中居中居中居中</div> </div> <!--CSS--> .parent { width: 400px; height: 400px; background-color: red; display: flex; } .child { background-color: green; margin: auto; }
效果
高度不固定的块级元素—flex布局2
<!--HTML--> <div class="parent"> <div class="child">居中居中居中居中居中居中居中居中</div> </div> <!--CSS--> .parent { width: 400px; height: 400px; background-color: red; display: flex; justify-content: center; align-items: center; } .child { background-color: green; }
暂时就这么多吧,以后有更好的办法,都会持续更新的。。。。
相关文章推荐
- CSS实现水平垂直居中方法总结
- css内水平居中和垂直居中问题总结
- 关于css中的水平垂直居中问题总结
- CSS里的各种水平垂直居中基础写法心得总结
- CSS水平垂直居中总结
- css+div水平垂直居中布局总结(3种方案)
- CSS布局中居中(水平/垂直/水平垂直)问题的总结
- css实现水平垂直居中(总结)
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- css 垂直水平居中总结
- CSS之图片水平垂直居中总结
- CSS-水平/垂直居中总结
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- css让容器水平垂直居中的几种方式总结
- css 实现元素水平垂直居中总结5中方法
- CSS布局——水平垂直居中布局总结学习
- css 元素水平垂直居中总结
- CSS内联元素、块级元素的水平居中和垂直居中方法总结
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
- CSS元素水平垂直居中方案总结