CSS中常用的居中方式

居中方式(水平,垂直)

在文档流中元素的居中

水平居中:

内联元素:
1.在父元素上设置“text-align=center”
块级元素:
1.如果定宽:设置margin-left:auto; margin-right:auto
2.如果不定宽:设置margin:0 120px;

垂直居中:

利用table标签嵌套 兼容性最好
内联元素:
1.在父元素上设置“padding:10px 0;和line-height”
2.切记不要在父元素上定高!!
3.在父元素上设置 padding:10px 0
4.在父元素上设置 line-height

块级元素:
1.在父元素上加 “padding:10px 0;”
inline-block垂直居中:伪元素垂直居中

不在文档流中的元素
浮动元素居中?
若强行居中则嵌套进一个块级元素中
1.清除浮动:.clearfix::after{content" ";display:block;clear:both;}
2.嵌套进一个inline-block元素内 多余像素使用( display:inline-block; vertical-align:top;)
绝对定位元素居中:

  1. 已知父容器宽高:top:50%; left:50px; 负margin-left:宽度的一半;;负margin-top:高度的一半;
  2. 未知父容器宽高:相对于子元素自身transfor:translate(-50%,-50%)

未完待续

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,712评论 1 92
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,645评论 0 1
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,573评论 0 30
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,645评论 0 5
  • 记9月30日“一念之转”公益沙龙 感恩月曦协导师分享,感恩所有同学。 自我感悟:不同于其他课上的醍醐灌顶,这堂课给...
    汀口音十一阅读 4,776评论 0 2

友情链接更多精彩内容