如何横向居中和垂直居中?

来源:互联网 发布:网络语言排面什么意思 编辑:程序博客网 时间:2024/04/30 18:05

【外部元素用O表示,内部元素用I表示】

横向居中

  • 在O和I都是block元素情况下,给I添加
    margin:0 auto;

  • 在I是文本情况下,给I添加
    text-align:center;

  • O是弹性盒子,I是盒子

display: flex;justify-content: space-around;

垂直居中

  • 在O是一个块级元素,(多个)内部元素是并排情况下,给O添加
display:flex;align-item:center;
  • I是行内元素(一般针对img)的时候。
    给I添加:
    vertical-align: middle;
    给O添加:
    line-high:O的高度

  • I是文本,给I添加
    line-high:O的高度

原创粉丝点击