如何解决CSS的水平垂直居中的问题
这篇文章主要为大家展示了“如何解决CSS的水平垂直居中的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决CSS的水平垂直居中的问题”这篇文章吧。
创新互联公司是专业的中方网站建设公司,中方接单;提供成都网站设计、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行中方网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
创建元素
child
垂直水平居中方案一:知道宽度的情况下 absolute+margin负值
.parent { width:400px; height:400px; background: red; position: relative; } .child { position: absolute; left:50%; top:50%; background: yellow; width:50px; height:50px; margin-left:-25px; margin-top:-25px; }
垂直水平居中方案二:不知道宽高的情况下 absolute+transform
.parent { width:400px; height:400px; background: red; position: relative; } .child { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
垂直居中方案三:position+margin:auto
.parent { position:relative; width:200px; height:200px; background: red; } .child { width:80px; height:40px; background: yellow; position: absolute; left:0; top:0; right:0 ; bottom:0; margin:auto; }
垂直居中方案四:+ 多行文本的垂直居中 :table-cell+vertical-align:middle;
.parent { height: 300px; width:400px; border: 1px solid red; display: table-cell; vertical-align: middle; text-align: center; } .child { display: inline-block; width:50px; height:50px; background: blue; } /* 或者 */ .parent { width: 400px; height: 300px; display: table-cell; vertical-align: middle; border: 1px solid red; text-align: center; } .child { display: inline-block; vertical-align: middle; background: blue; }
垂直居中方案五:display: flex
.parent { width:400px; height:200px; background:red; display: flex; justify-content:center; align-items:center; } .child { height:100px; width:100px; background:green; }
垂直居中方案六:伪元素
.parent { width:200px; height:200px; background:red; text-align: center; } .child { height:100px; width:100px; background:yellow; display: inline-block; vertical-align: middle; } .parent:before { content:""; height:100%; vertical-align: middle; display: inline-block; }
以上是“如何解决CSS的水平垂直居中的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文标题:如何解决CSS的水平垂直居中的问题
转载注明:http://pwwzsj.com/article/pehpjs.html