CSS3 不确定高宽竖直水平垂直居中的几种方法

日期:2021-02-27 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

1、flex合理布局

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

这类方法适配性不太好

2、position + transform

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(⑸0%, ⑸0%);
}

IE9下列不适用transform特性

3、table + table-cell

.father {
    display: table;
}
.son {
    display: table-cell;
    vertical-align: middle;
      text-align: center;
}

4、:before + display:inline-block

.father {
  text-align: center;
}
.father::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.son {
  display: inline-block;
}

到此这篇有关CSS3 不确定高宽竖直水平垂直居中的几种方法的文章内容就详细介绍到这了,更多有关CSS3 不确定高宽竖直水平垂直居中內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!