CSS居中整理

于 2018-07-23 19:55:08 发布
阅读量601 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端 CSS 文章标签： CSS CSS居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31059475/article/details/81173629
这篇博客整理了多种CSS居中方法，包括水平居中、垂直居中和垂直水平居中。详细介绍了单个块级元素、多个块级元素以及不同高度内容的居中技巧，并提供了CodePen代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于最近用到CSS居中应用，网上资料过多，然后关于居中的技巧有很多，就先总结下方便后续忘记了，好回忆查看。

关于实现

水平居中

行内元素** 

 1. 详情见：https://codepen.io/Sally-hzy/pen/jprOQd

width="800" height="265" scrolling="no" title="CSS -Line-level-center" src="//codepen.io/Sally-hzy/embed/jprOQd/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen CSS -Line-level-center by Sally (@Sally-hzy) on CodePen. 

 2. 该方法适用于 inline、inline-block、inline-table、inline-flex 之类的元素。

块级元素

width="800" height="265" scrolling="no" title="CSS-block-Line-center-one" src="//codepen.io/Sally-hzy/embed/dZBgmb/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen CSS-block-Line-center-one by Sally ( @Sally-hzy) on CodePen. 
2.不用父元素或元素如何，只要指定了宽度，该方法都适用
3.但是对浮动（float）的元素没有，可以尝试用另一种

https://codepen.io/Sally-hzy/pen/LOKgQK

width="800" height="265" scrolling="no" title="CSS-block-line-center-float" src="//codepen.io/Sally-hzy/embed/LOKgQK/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen CSS-block-line-center-float by Sally ( @Sally-hzy) on CodePen.

垂直居中

行内元素

width="800" height="265" scrolling="no" title="css-block-height-block-two" src="//codepen.io/Sally-hzy/embed/KBgGRN/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-height-block-two by Sally ( @Sally-hzy) on CodePen. 
3.直接用flex布局的方式实现

https://codepen.io/Sally-hzy/pen/OwRBYy

width="800" height="265" scrolling="no" title="css-block-height-block-three" src="//codepen.io/Sally-hzy/embed/OwRBYy/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-height-block-three by Sally ( @Sally-hzy) on CodePen.

垂直水平居中

  1. 元素高度与宽度已知

将元素相对于其父元素的宽度/高度值向右并向下移动一半的距离，这时元素左上角的顶点刚好位于父元素的中心。然后再通过设置负边距值的方法，将元素相对于其自身的宽度/高度值向左并向上移动一半的距离，就可实现水平垂直均居中的效果了。并且这种方法的浏览器兼容性是很好的。
https://codepen.io/Sally-hzy/pen/vaXQmO

width="800" height="265" scrolling="no" title="css-block-center-one" src="//codepen.io/Sally-hzy/embed/vaXQmO/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-center-one by Sally ( @Sally-hzy) on CodePen.

元素宽度或高度未知
- 如果元素的宽度或者高度未知，则在将元素相对于父元素的宽高往向右并向下移动一半距离后，再用 transform
属性来将其向左并向上移动自身宽度及高度值一般的距离即可。

https://codepen.io/Sally-hzy/pen/MBjZwx

width="800" height="265" scrolling="no" title="css-block-center-two" src="//codepen.io/Sally-hzy/embed/MBjZwx/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-center-two by Sally ( @Sally-hzy) on CodePen.

或者

.parent {
display: flex;
justify-content: center;
}
.child {
margin: auto 0;
}

https://codepen.io/Sally-hzy/pen/QBKoZm
width="800" height="265" scrolling="no" title="css-block-center-four" src="//codepen.io/Sally-hzy/embed/QBKoZm/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-center-four by Sally (@Sally-hzy) on CodePen.

参考文章：
https://segmentfault.com/a/1190000005353303
https://jinlong.github.io/2013/08/13/centering-all-the-directions/
https://css-tricks.com/centering-css-complete-guide/

评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值