分享更有价值
被信任是一种快乐

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;

关于“CSS元素居中的方法有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“CSS元素居中的方法有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: 怎么用css实现基于用户滚动应用

这篇文章主要介绍怎么用css实现基于用户滚动应用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   通过将当前滚动偏移映射到html元素上的属性,我们可以根据当前滚动位置设置页面上的元素样式。我们可以使用它来构建一个浮动导航组件。   …

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册