水平且垂直居中方法（10种）

zgbgx 发布于2019-08-30 14:01 / 2161人阅读

摘要：前言水平且垂直居中方法有哪些这在实际工作中经常用到，小记一下。以下结合水平居中强调实现垂直居中。子级元素是内联元素，父级元素设置属性垂直居中。

前言

水平且垂直居中方法有哪些？这在实际工作中经常用到，小记一下。

演示HTML结构

基本思想

一般的，水平居中相对垂直居中简单很多，对于内联元素（inline、inline-block、inline-table和inline-flex），父级元素设置text-align: center;；对于块级元素，子级元素设置margin: 0 auto;。以下结合水平居中强调实现垂直居中。

1、已知父级元素宽高，父级元素定位非 static ，子级元素定位设为 position: absolute/fixed ，再利用 margin 、 left 和 top 属性居中。

#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background-color: #ff00ff;
}

注：需要已知父级元素固定宽高，才能确定 margin-left 和 margin-right 。

2、子级元素是内联元素，父级元素设置 line-height 属性垂直居中。

#div1 {
  width: 200px;
  height: 200px;
  line-height: 120px;
  text-align: center;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  line-height: normal;
  text-align: left;
  display: inline-block;
  background-color: #ff00ff;
}

注：需要已知父级元素的固定高度，才可以确定line-height。

3、子级元素是内联元素，父级元素用 display: table-cell; 和 vertical-align: middle; 属性实现垂直居中。

#div1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: #ff00ff;
}

注：无需要确定父级元素的宽高，inline-block 、 table-cell 不兼容ie67

看到还有一种方案，是借助伪元素 ::after 将容器撑高，实现内联元素垂直居中

#div1 {
  width: 200px;
  height: 200px;
  background-color: #ffff00;
  text-align: center;
}

#div1::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#div2 {
  width: 100px;
  display: inline-block;
  background-color: #cccccc;
  vertical-align: middle;
}

缺点：较难以理解，只适用于一个子级内联元素（有多个子元素不适用）

4、对于子级是块级元素，父级元素同样用 display: table-cell; 和 vertical-align: middle; 属性实现垂直居中，水平方向居中用 margin: 0 auto; 。

#div1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #ff00ff;
}

注：无需要确定父级元素的宽高，table-cell不兼容ie67

5、利用css3 translate 特性：位移是基于元素宽高的。

#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ff00ff;
}

注：无需要确定父级元素的宽高，translate属性兼容IE9+

6、当父级是浮动的，用 display: table-cell; 会失效，这时需要包三层，第一层 display: table;，第二层 display: table-cell; 第三次居中层

#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  display: table;
  background-color: #ffff00;
  float: left;
}

#div2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  /* text-align: center; */
  background-color: #cccccc;
}

#div3 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  /* display: inline-block; */
  background-color: #ff00ff;
}

注：无需要确定父级元素的宽高，但HTML标签层数较多。

7、绝对定位加四边定位为0，margin 为 auto。

#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  background-color: #cccccc;
}

注：无需要确定父级元素的宽高，但把定位属性全用上了

8、利用flex布局 justify-content: center; 和 align-items: center; 属性居中。

#div1 {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

注：无需要确定父级元素的宽高，兼容IE10+

9、利用grid布局，划分成3x3栅格，第二行第二列格子垂直水平居中

#div1 {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: #ffff00;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
  grid-row-start: 2;
  grid-column-start: 2;
}

注：无需要确定父级元素的宽高，兼容性Firefox 52, Safari 10.1, Chrome 57, Opera 44

10、利用flex或grid布局结合 margin: auto;

#div1 {
  width: 200px;
  height: 200px;
  display: flex;
  /* display: grid; */
}

#div2 {
  width: 100px;
  height: 100px;
  margin: auto;
}

注：此方法最简洁，但是 flex/grid 存在兼容性问题

GPU云服务器云服务器水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115718.html

CSS元素（文本、图片）水平垂直居中方法

摘要：上下左右负伪元素父容器上设置用于设置为行内元素的水平居中居中元素自身设置用于设置为块级元素的水平居中元素宽度固定，且不能浮动绝对定位 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...

wuyangnju 2019-04-23 13:08 评论0 收藏0
CSS水平居中和垂直居中的若干方法

摘要：居中分为水平居中和垂直居中，水平居中方式也较为常见和统一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同时实现水平和垂直居中。博客原文地址：Claiyre的个人博客 https://claiyre.github.io/如需转载，请在文章开头注明原文地址不为繁华易匠心从css入门就开始接触，无所不在的，一直备受争议的居中问题。css居中分为水平居中和垂直居中，水平居中方式也较为...

hiyayiji 2019-08-29 12:29 评论0 收藏0
常见面试题—css实现垂直水平居中

摘要：常见面试题实现垂直水平居中前言面试中常常被问到，如何使用来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常会有垂直水平居中的需求。常见面试题—css实现垂直水平居中前言面试中常常被问到，如何使用css来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常...

gougoujiang 2019-08-29 15:40 评论0 收藏0
初探flex布局

摘要：一布局概述布局是一种较新盒子模型，在布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩其大小。下面我们来看用布局怎么解决这些问题。所以学会使用布局是非常有必要的。想详细了解布局请点击这里。一 flex布局 1.1 flex概述 flex布局是一种较新CSS盒子模型，在flex布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩...

Jeffrrey 2019-08-29 12:48 评论0 收藏0
cssfloat布局以及其他小技巧

摘要：如果里有多行，那么就把每一行的行高加起来算。姓名怎么和联系方式对齐其他的方法直接用可以的，不过会受到字体的影响。字体一变，加的就会变。代码解释代码如果是内联元素要被改变宽度的话，一定要先写上。 css float 布局以及其他小技巧总结这篇博文前面四个部分是关于css 经典布局如果你已经知道了可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 ...

ISherry 2019-08-02 10:10 评论0 收藏0