css子群-CSS 子元素在父元素内水平和垂直居中

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

先决条件：将子元素设置为在父元素内水平和垂直居中。 除非另有说明，通常父元素不会是内联元素。 实际开发中，不要尝试用行内元素包裹一个块元素（包括行内块元素），这样会出现莫名其妙的现象。 内联元素应该只嵌套内联元素或文本（文本也相当于内联元素）。

水平居中元素

场景一：子元素是块元素方法一：父元素是块元素，左右marginauto

如果子元素是块元素（display:block）且没有设置float，而父元素是块元素，则可以设置子元素margin-left:auto;margin-right:auto; 使子元素在父元素中水平。 居中。

.wrapper {
  display: block;
  background-color: red;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 子元素水平居中 */
  margin-left: auto;
  margin-right: auto;
}

方法二：父元素为表格单元格，左右marginauto

当子元素为块元素且父元素为表格单元格时，还可以使用左右marginauto使子元素水平居中（与方法1相同）。

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* 父元素变成表格 */
  display: table-cell;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  margin-left: auto;
  margin-right: auto;
}

方法三：设置父元素的相对定位和子元素的绝对定位。 方法3.1：left+translateX

当父元素相对定位，子元素设置绝对定位时，left:50%;transform:translateX(-50%); 实现子元素的水平居中。

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 绝对定位使用 50% 水平居中*/
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

方法 3.2：负裕度

或者使用负边距使子元素水平居中。 这种方法需要估计负margin的值，所以更推荐第一种方法。

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 绝对定位使用负 margin 水平居中*/
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

方法3.3：左右边距：auto+left0right0

您还可以使用左右 margin:auto 和 left:0;right:0; 实现绝对定位子元素的水平居中。

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 绝对定位使用 margin: auto 实现水平居中*/
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

场景2：子元素不是块元素。 方法一：父元素是块元素，text-align:center

如果子元素是内联块元素（display:inline-block）或者内联元素（display:inline;）且没有设置float，而父元素是块元素，则只需设置text-align:center; 到父元素，使子元素在父元素内水平居中。

.wrapper {
  display: block;
  background-color: red;
  
  /* 行内块级子元素水平居中 */
  text-align: center; 
}
.son {
  display: inline-block; 
  width: 100px;
  height: 100px;
  background-color: green;
}

特别是，当子元素是内联元素时，只有父元素设置了text-align:center才能看到效果； 当它被内容拉伸时。 另外，还讲了父元素是块元素的情况。 虽然如果父元素是内联块元素，对应的水平居中方法仍然有效。 但需要注意的是，由于内联块元素的特性css子群，长度是可以设置的。 如果不这样设置 长度默认为内部内联元素的总和。 所以上面的方法只有在设置内联块的父元素长度时才起作用！

.wrapper {
  display: inline-block;
  background-color: red;
  
  /* 父元素是行内块时，必须设置高度 */
  width: 200px;
  text-align: center;
}
.son {
  display: inline-block;
  background-color: green;
  width: 100px;
  height: 100px;
}

方法二：父元素是表格单元格，text-align:center

如果父元素是表格单元格，子元素是行内元素（包括行内块元素），则需要设置父元素text-align:center来实现子元素水平居中（同方法1） 。

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* 父元素变成表格 */
  display: table-cell;
  
  /* 子元素是 inline-block/inline 情况 */
  text-align:center;
}
.son {
  display: inline-block;
  background-color: green;
  width: 100px;
  height: 100px;
}

场景3：子元素浮动

如果子元素设置为float，那么我们知道，如果父元素没有设置高度，那么高度就会被设置为0，即高度会塌陷，但是子元素的长度却被扩展了content，这意味着它本身相当于一个内联块元素（宽度和高度可以设置）。 如果父元素和子元素都设置了宽度和高度，并且子元素需要在父元素中水平和垂直居中，我们可以让子元素相对定位，然后设置水平居中。 实现方法与场景一方法三相同，代码如下：

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 子元素设置相对定位，再设置水平居中即可 */
  float:left;
  position:relative;
  left: 50%;
  transform: translateX(-50%);
}

一刀切的方法：将父元素设置为弹性框并 justify-content:center

如果父元素是弹性盒子（display:flex），那么只需要设置 justify-content:center;，其内部所有子元素就会整体水平居中。 另外，你会神奇地发现，如果你把父元素做成弹性盒子，子元素无论如何都会变成内联块元素，即使你强制它变成内联元素。

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* 父元素变成弹性盒 */
  display: flex;
  
  /* 所有子元素作为整体水平居中 */
  justify-content: center;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
}

垂直居中元素

场景一：子元素是块元素。 方法一：父元素为表格单元格，parent(vertical-align: middle) + child(上下marginauto)

我们知道设置块元素的左右marginauto可以实现水平居中，但是设置上下marginauto无法实现垂直居中（具体原因参见：margin:auto为什么只能实现水平居中，而不能实现垂直居中）定心）。 当父元素为表格单元格（display:table-cell;）时，还可以通过设置父元素vertical-align:middle;来使子元素垂直居中！

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* 父元素变成表格 */
  display: table-cell;
  vertical-align: middle;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
}

方法二：父元素相对定位，子元素绝对定位

和设置水平居中形式时子元素绝对位于上方时一样，我们仍然可以使用transform或者负margin或者上下marginauto来让子元素垂直方向居中。

方法2.1：top+translateY

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 绝对定位使用 50% 实现垂直居中*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

方法2.2：负裕度

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 绝对定位使用负 margin 垂直居中*/
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

方法2.3：上下marginauto+top0bottom0

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 绝对定位使用 margin: auto 实现垂直居中*/
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}

场景二：子元素是内联元素（单行文本） 方法一：父元素的列宽和高保持一致

在上述三种场景中，如果子元素是块元素或内联块元素，则该技术是有效的。 但如果子元素是行内元素，想要在块元素内垂直居中，只需要让父元素的列宽和列高一致即可。

.wrapper {
  display: block;
  background-color: red;
  height: 200px;
  line-height: 200px;
}
.son {
  display: inline;
  background-color: green;
}

方法二：上下等尺寸填充

或者，您可以向父元素添加相同大小的内边距，以实现内联元素的垂直居中。 而且这些方法不能再设置父元素的高度，父元素需要拉伸内部内联元素的高度。

.wrapper {
  display: block;
  background-color: red;
  padding-top: 100px;
  padding-bottom: 100px;
}
.son {
  display: inline;
  background-color: green;
}

场景3：子元素浮动

与浮动子元素的水平居中方法类似css子群，如果想让浮动子元素在父元素中垂直居中，也需要让子元素相对定位，然后设置垂直居中。 方法与场景1方法2相同，代码如下：

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 子元素设置相对定位，再设置垂直居中即可 */
  float:left;
  position:relative;
  top: 50%;
  transform: translateY(-50%);
}

一刀切的方法：将父元素设置为flexbox，align-items:center

如果父元素是flexbox，那么只需要设置align-items:center;，其内部的所有子元素就会整体垂直居中。

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* 父元素变成弹性盒 */
  display: flex;
  
  /* 所有子元素作为整体垂直居中 */
  align-items: center;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
}

子元素水平和垂直居中

基于前面的情况，我们可以很容易地组合以下几种方式来实现子元素的水平和垂直居中：

方法一：父亲长相儿子绝对+top50%+left50%+translate-50%

结合translateX和translateY，我们可以得到如下水平和垂直居中方法：

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 绝对定位使用 translate 50% 实现水平垂直居中*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法二：子阶段+top50%+left50%+translate-50%

与方法一类似，如果子元素不是绝对定位而是相对定位，也可以用同样的方法设置水平居中和垂直居中。

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 相对定位使用 translate 50% 实现水平垂直居中*/
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法三：父元素表格单元格+marginauto

如果父元素是表格，我们还可以通过以下方式实现水平和垂直居中：

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* 父元素变成表格 */
  display: table-cell;
  vertical-align: middle;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 子元素设置 margin auto 实现水平垂直居中 */
  margin: auto;
}

特别是，如果子元素是内联块或者内联元素，父元素需要设置text-align:center来实现水平和垂直居中。

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* 父元素变成表格 */
  display: table-cell;
  vertical-align: middle;
  
  /* 兼容子元素是 inline-block/inline 情况 */
  text-align:center;
}
.son {
  display: inline-block;
  background-color: green;
  width: 100px;
  height: 100px;
}

技巧4：子元素是浮动元素的居中形式

如果子元素设置为float，那么我们知道，如果父元素没有设置高度，那么高度就会被设置为0，即高度会塌陷，但是子元素的长度却被扩展了content，这意味着它本身相当于一个内联块元素（宽度和高度可以设置）。 如果父元素和子元素都设置了宽度和高度，并且子元素需要在父元素中水平和垂直居中，我们可以让子元素相对定位，然后设置水平和垂直居中。 具体方法如下：

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* 子元素设置相对定位，再设置水平垂直居中即可 */
  float:left;
  position:relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* 或者使用负 margin
  margin-top: -50px;
  margin-left:-50px; 
  */
}

方法5（台湾香膏）：弹性布局

将父元素设置为弹性框并设置 justify-content:center;align-items:center; 同时实现子元素的水平和垂直居中。

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* 父元素变成弹性盒 */
  display: flex;
  
 /* 所有子元素作为整体水平垂直居中 */
  justify-content: center;
  align-items: center;
}
.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
}

参考资料：CSS子元素在父元素中水平、垂直居中的几种方式CSS-水平居中、垂直居中、水平垂直居中、水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中...帮助您完成它