css如何实现水平居中


本文摘自PHP中文网,作者青灯夜游,侵删。

css实现水平居中的方法:1、使用margin和text-align属性;2、通过“display:flex”;3、通过“display:table-cell”和margin-left;4、通过绝对定位;5、通过transform属性。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css实现水平居中

1、通过margin+text-align实现CSS水平居中。

这种方法是实现CSS水平居中最最常用的,我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。

1.png

2、通过display:flex实现CSS水平居中。

随着越来越多兼容flexbox,所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;

这个跟CSS垂直居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。

2.png

阅读剩余部分

相关阅读 >>

怎样建立新的css规则

什么是css伪类

css字体有哪些

css中处理不同长度文本的几种小技巧

css如何设置行距

值得收藏的26个css面试题,增强你的css基础!

css怎么让样式失效

css如何实现水平居中

css高度设置百分比不生效怎么办

请问css的作用是什么

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...