CSS如何实现垂直水平居中
这篇文章主要介绍了关于CSS如何实现垂直水平居中,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
前言
面试中常常被问到,如何使用css来实现一个元素的垂直水平方向上居中,特别是笔试题的时候,这道题目的出现频率还是比较高的,当然,在我们的生活中,也常常会有垂直水平居中的需求。
CSS实现垂直水平居中的三种方案
1.容器内元素display:inline/inline-block
这种情况就比较容易了,直接设置容器的text-align就可以实现内容元素的水平居中,设置垂直居中的话要设置容器的高度,然后设置容易的line-height===height就可以,如下:
<p class="container"> <span>this is text</span> </p>
.container{ text-align: center; height: 50px; background: green; line-height: 50px; }
2.容器内元素display:block,且元素宽高已知
这种情况下我们使用position这个属性结合设置偏移来实现。首先设置容器的position:relative,设置元素position为absolute,然后设置元素(.inner-box)的偏移top,left,margin-top,margin-left,其中,top,left设置为50%,而margin-top/margin-left的偏移量均为本身元素高/宽的一半,为负值。
代码如下:
<p class="container"> <p class="inner-box"></p> </p>
.container { height: 200px; width: 200px; background: pink; position: relative; } .inner-box { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; height: 100px; width: 100px; background: green; }
3.容器内元素display:block,且元素宽高未知
这种方法与方法二类似,但是不同的是不能通过设置margin-top/left偏移来达到效果了,因为容器内元素的宽高是未知的。这次我们通过设置left/top/bottom/right:0,然后设置margin:auto。
代码如下:
<p class="container"> <p class="inner-box"></p> </p>
.container { height: 200px; width: 200px; background: pink; position: relative; } .inner-box { position: absolute; height: 100px; width: 100px; top: 0; right: 0; left: 0; bottom: 0; margin: auto; background: green; }
后话
实现垂直水平居中的方式有多种,通过设置translate,或者使用flex布局也是可以的,但是以上写的几种方法是兼容性比较好的。如果有不足,欢迎这位大佬指出。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上就是CSS如何实现垂直水平居中的详细内容,更多请关注其它相关文章!
上一篇: 前端进阶(十):封装拖拽对象
下一篇: PHP.ini配置文件中文
推荐阅读
-
CSS如何实现网易的盖楼效果_html/css_WEB-ITnose
-
【求教】请问,如何用css3实现div自适应高度?_html/css_WEB-ITnose
-
CSS如何实现滑动门效果_html/css_WEB-ITnose
-
如何用css实现元素水平与垂直居中_html/css_WEB-ITnose
-
怎样让DIV中的两个TEXTBOX垂直居中_html/css_WEB-ITnose
-
请问这种背景黑框固定的效果如何实现的?是css还是js_html/css_WEB-ITnose
-
如何实现网页中的文字不允许被复制_html/css_WEB-ITnose
-
JavaScript+css如何实现酷炫的导航栏?
-
CSS实现水平垂直同时居中的5种思路 - 小火柴的蓝色理想
-
实现垂直居中的几种方法介绍