css元素居中

水平居中

  • 这里讨论的水平居中,是针对处于文档流中的元素。绝对定位(absolute),固定定位(fixed),浮动(float)这三种定位的元素由于脱离了文档流,如果要水平居中只能通过设置top/right/bottom/left位置达到。这里讨论的水平居中是针对还处于文档流中的元素,也就是无定位(static)和相对定位(relative)元素。文档流中的元素分为block,inline-block,inline三种显示模式,所以水平居中也分为三种方式:
  1. 对于block元素,水平居中通过设置margin: 0 auto来实现。
  2. 对于inline-block元素,需要通过设置父元素的text-align:center来实现。
  3. 对于inline元素同inline-block元素。

垂直居中

  • 文字垂直居中可以用line-height等于容器高度来实现。
  • 如果是图片,可以使用padding:xxpx 0来实现。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 居中解决方案。居中是前端经常面临的问题,居中分为水平居中和垂直居中,而以垂直居中更难。 水平居中 行内元素只需要在...
    清水芦苇阅读 402评论 0 0
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,508评论 0 5
  • 一个正值二十三岁芳龄的花季少女晴雨,在父母亲戚的逼迫下 无奈顺从了他们的安排。放下手头的工作,离开喜欢的城市,...
    皮皮狗那个皮皮阅读 480评论 0 0
  • twinkle twinkle little star 熟悉的歌.再次听,是否还是一样的心情? 熟悉的路.再次走,...
    梅叔阅读 407评论 0 0