2018-03-17 前端面试--水平垂直居中

可以分几种情况考虑:


(1)块状元素的水平垂直居中:


利用绝对定位和负margin,这时要给块级元素设置width,height;


利用绝对定位+transform:translate属性,可以使不知块级元素宽高的情况下实现居中。



利用flex盒子,在父元素上设置align-items和justify-items即可实现子块状元素的居中。

还有:对于块状元素,仅仅只实现水平居中的话,可以用margin:0 auto;实现

(2)行内元素的水平垂直居中



在父盒子上使用text-align:center;在子行内元素上设置line-height等于父盒子的height。


将父盒子设置为table类型;子行内元素设置为table-cell类型;设置行内元素的vertical-align;可实现与上面相同的效果。

(3)最后可以使用flex盒子


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 12,531评论 3 30
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,585评论 0 1
  • 开篇十三章 1、盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距...
    多语阅读 2,732评论 0 1
  • 今天翻看到了十几年前的一首诗,那时和妻在热恋,她在南方,我在陕北…… 今夜繁星满天 今夜多彩的霓虹 今夜海是低沉的...
    营州布衣阅读 1,872评论 1 5