使用flex布局来垂直和水平居中

css3的flex布局特别适用于图片和文字混杂在一同一行的时候来实现居中：

display: flex;
justify-content: center;
align-items: center;
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1赞 92
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,332评论 2赞 66
  • Flexbox实现元素的水平居中和垂直居中
    网上有N种方法实现元素的水平居中和垂直居中，如CSS制作水平垂直居中对齐,这些方法各有各的优缺点。在这里，我们使用...
    一只好奇的茂阅读 8,826评论 0赞 22
  • 如何实现元素的水平垂直居中
    收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,204评论 3赞 30
  • 今天下班，径直的就来到了理发店，似乎已经约定熟成了，每当需要做重大决定或者举棋不定时，我都会想着剪个发，换个心情。...
    她爱胡说阅读 172评论 1赞 10