1.水平居中

1.1 行内元素

.parent {
    text-align: center;
}
复制代码

1.2 块级元素

1.2.1 块级元素的一般居中方法

.son {
    margin: 0 auto;
}
复制代码

1.2.2 子元素包含floatle1.2❀。 1) flex 2012版本

.son {
    display: flex;
    justify-content: center;
}
复制代码

2) flex 2009版本

.parent {
    display: box;
    box-orient: horizontal;
    box-pack: center;
}
复制代码

1.2.4 绝对定位

1) 转换

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
复制代码

1) 转换

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
复制代码

3:0)1.2.4 ）左： 5%

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;
}
复制代码

总结

以上是8种CSS水平居中方法。

2。垂直居中

2.1 内联元素

.parent {
    height: 高度;
}

.son {
    line-height: 高度;
}
复制代码

注。 ① 子元素的行高值为父元素的高度值。 ② 一行文字。

2.2 块级元素

2.2.1 文本内块级元素

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}
复制代码

适应 IE7。

2.2.2 table

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}
复制代码

优点

• 元素高度可以动态更改，无需在 CSS 中定义。如果父元素没有足够的空间，元素的内容将不会被截断。

缺点

• 不适用于IE6-7，甚至IE8 beta。

2.2.3 Flex灵活盒

1) flex 2012版本

.parent {
    display: flex;
    align-items: center;
}
复制代码

优点

• 内容块的宽度和高度是任意的，它们优雅地流过。
• 可用于更复杂和高级的布局技术。

缺点

• 不支持IE8/IE9。
• 需要浏览器供应商前缀。
• 可能会出现渲染问题。

2) Flex 2009版本

.parent {
    display: box;
    box-orien: vertical;
    box-pack: center;
}
复制代码

优点

• 实施简单，可扩展性强。

缺点

• 兼容性差，不支持IE。

2.2.4 绝对定位

1) 变换

.son {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}
复制代码

优点

• 代码较少。

缺点

• IE8不支持。该属性中必须添加浏览器制造商前缀，这可能会干扰其他转换效果。在某些情况下，文本或元素边界的呈现可能会模糊。

2) 顶部：50%

.son {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}
复制代码

优点

• 适用于所有浏览器。

缺点

• 如果父元素没有足够的空间，子元素可能不可见（浏览器窗口最小化时不显示滚动条）。如果子元素设置为overflow:auto，则如果bar高度不够就会发生滚动。

3）顶部/底部：0；

.son {
    position: absolute;
    top: 0;
    botton: 0;
    margin: auto 0;
}
复制代码

优点

• 简单。

缺点

• 如果空间不够，子元素会被截断，但没有滚动条。

总结

以上是8种CSS垂直居中方式及其优缺点。

3.总结

上面总结了16种方法，分别针对水平居中和垂直居中。其中

• flex
• 绝对定位

适用于水平和垂直居中。

作者：Agoreal
来源：掘金