CSS居中在我们平时的工作中会经常用到,所以我们对这方面的知识一定要掌握好,今天华清远见CSS开发技术频道就为您分享一篇关于CSS居中方面的内容,希望对您能有所帮助。
# 内联元素水平居中
在css中要使内联元素水平居中的方法是给它的父级元素添加text-align: center;样式即可。
# 内联元素垂直居中
在css中要使内联元素垂直居中的方法是给它的父级元素添加 line-height 样式,当line-height的值等于父级元素的高度时,元素就垂直居中了。
# 块级元素水平居中
要使块级元素水平居中,添加margin: 0 auto;样式即可做到,也可以写成margin-left: auto;或margin-right: auto;
# 块级元素垂直居中
块级元素垂直居中,在css中没有现成的方法可以使用,但是万能的position样式可以办到,像这样:position: absolute;top: 50%;transform: translateY(-50%);
即可实现块级元素垂直居中,但是需要注意的是,需要将这个块级元素的父级元素的 position值设置为 relative,像这样:position:relative;
# 块级元素垂直水平居中
如果需要将块级元素设置为水平垂直居中,则这样:position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);即可,同样需要将这个块级元素的父级元素的 position 值设置为 relative,像这样:position:relative;
热点新闻
前端开发技术库