CSS：元素居中的方式

水平居中

  • 文字的水平居中
    1.使用text-aline:center;就能实现
  • 元素的水平居中
    1.块元素的水平居中设置宽高，对子元素设置margin:0 auto;就能实现
    2.行内元素以及行内复合元素的水平居中，行内元素以及包含inline的元素设置text-aline:center;即可实现水平居中。img是inline-block元素
    3.flex中的水平居中(主轴居中，flex-deraction:row;)，使用justify-content:center;

垂直居中

  • 文字的垂直居中
    1.单行文字定义line-height和height相等就可以实现垂直居中
    2.多行文字居中可以使用span把文字包起来，然后给span设置inline-block，然后在span的父元素设置vertical-aline:middle;
  • 块元素的垂直居中
    1.（垂直水平都居中）父元素添加position:relative;子元素使用position:absolute;top:50%;left:50%;margin-top:'父元素height一半的负值';
    margin-left:'父元素width一半的负值'
  • 行内块元素垂直居中
    1.父元素设置display:table-cell;vertical-aline:middle;子元素设置vertical-aline:middle;即可实现垂直居中
  • 对于flex布局的元素，(水平方向)，在父元素使用aline-items:center;即可
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容