水平/垂直居中的方法

最新推荐文章于 2023-09-30 13:11:25 发布

原创最新推荐文章于 2023-09-30 13:11:25 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

CSS 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了多种实现网页元素水平和垂直居中的方法，包括设置text-align、margin auto、绝对定位、使用flex-box布局、表格显示方式、CSS3位移等。针对不同场景，如元素宽度固定、未知高度等，提供了相应的解决方案，帮助开发者灵活应对各种布局需求。

水平居中的方法

元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
绝对定位和移动: absolute + transform
使用flex-box布局，指定justify-content属性为center
display设置为tabel-ceil

垂直居中的方法

将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
使用flex布局，设置为align-item：center
绝对定位中设置bottom:0,top:0,并设置margin:auto
绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
文本垂直居中设置line-height为height值
如果是单行文本, line-height 设置成和 height 值

.vertical {
    height: 100px;
    line-height: 100px;
  }

已知高度的块级子元素，采用绝对定位和负边距

.container {
  position: relative;
}
.vertical {
  height: 300px;  /*子元素高度*/
  position: absolute;
  top:50%;  /*父元素高度50%*/
  margin-top: -150px; /*自身高度一半*/
}

未知高度的块级父子元素居中，模拟表格布局
缺点：IE67不兼容，父级 overflow：hidden 失效

.container {
    display: table;
  }
  .content {
    display: table-cell;
    vertical-align: middle;
  }

新增 inline-block 兄弟元素，设置 vertical-align
- 缺点：需要增加额外标签，IE67不兼容

.container {
  height: 100%;/*定义父级高度，作为参考*/
}
.extra .vertical{
  display: inline-block;  /*行内块显示*/
  vertical-align: middle; /*垂直居中*/
}
.extra {
  height: 100%; /*设置新增元素高度为100%*/
}

绝对定位配合 CSS3 位移

.vertical {
  position: absolute;
  top:50%;  /*父元素高度50%*/
  transform:translateY(-50%, -50%);
}

CSS3弹性盒模型

.container {
  display:flex;
  justify-content: center; /*子元素水平居中*/
  align-items: center; /*子元素垂直居中*/
}