Skip to main content

居中

📜常见居中方案【2022】​

image-20220223165503545

一、水平居中​

HTML代码：

<div class="parent">
    <div class="children">
        我要水平居中
    </div>
</div>

1、块级元素​

1.1、使用 margin​

适用场景：

  • 需要明确宽度
<div class="parent">
    <div class="children">
        我需要居中
    </div>
</div>

<style>
.parent {
    width:150px;
}
.className {
    margin: 0 auto;
}
</style>

1.2、使用 float​

适用场景：

  • 子元素使用了float特性
<div class="parent">
    <div class="children">
        我需要居中
    </div>
    <div class="children">
        我需要居中
    </div>
</div>

<style>
.parent {
    width:fit-content;
    margin: 0 auto;
}
.children {
    float:left;
}
</style>

原理是借助父元素的位移来影响子元素，顺带一起位移

1.3、使用 flex​

适用场景：

  • flex 布局的所有场合
<div style="display:flex;">
    <div style="justify-content:center">
        flex 水平居中
    </div>
</div>

1.4、使用 position & transform​

适用场景：

  • 父元素无明确宽度
<div class="parent">
    <div class="children">
        flex 水平居中
    </div>
</div>
.parent
    width:100vw;

.children
    position:absolute;
    left:50%; 
    transform:translateX(-50%);

1.5、使用 position & margin​

应用场合:

  • 父元素有明确宽度的情况
:root
    --parent-width:100px;

.parent
    width:var(--parent-width)

.children
    position:absolute;
    left:50%; 
    margin-left; -0.5*var(--parent-width)

1.6、grid​

应用场景：

.parent
    display: grid;
    justify-items: center; // 水平居中
    justify-content: center;
    align-items: center;   // 垂直居中
    align-content: center

2、行内元素​

2.1、text-align​

适用场景：

  • 行内元素
  • 无需明确宽度
<div width=150px>
    <div style="text-align: center;">
        因为容器明确了 150px的宽度，所以能居中
    </div>
</div>

二、垂直居中​

1、块级元素​

1.1、行内块级元素​


2、行内元素​

2.1、line-height:高度​

使用场景：

  • 仅适用单行文本
  • 父元素有固定高度
:root
    --parent-height:100px;
    
.parent
    height:var(--parent-height)
    
.children
    line-height: var(--parent-height);

2.2、table​

使用场景：

  • 没有固定高度
  • 如果父元素没有足够空间时, 该元素内容也不会被截断
.parent
    display: table;
    
.children
    display: table-cell;
    vertical-align: middle;

兼容性：

  • IE6~7, 甚至IE8 beta中无效

2.3、 flex​

使用场景：

  • 无需固定高度
  • 内容自动计算溢出
  • 可用于很多复杂的布局，且使用简单
.parent
    display:flex;
    align-items: center;

兼容性：

  • IE8/IE9不支持。
  • 需要浏览器厂商前缀。
  • 部分移动设备渲染上可能会有一些问题。

2.4、flex （2009 ?）​

.parent
    display: box;
    box-orien: vertical;
    box-pack: center;

兼容性： 不支持ie

2.5、position & translateY​

使用场景：

.children
    position absolute
    top 50%
    transform: translateY(-50%);

兼容性：

  • transform的兼容性问题，有些需要加浏览器前缀

2.6、position & top 50%​

使用场景：

  • 非固定高度
  • 所有浏览器都支持
:root
    --parent-height:100px;

.children
    position: absolute;
    top: 50%;
    height: var(--parent-height);
    margin-top: -0.5 * var(--parent-height);

2.7、position & margin-auto​

使用场景：

  • 非固定高度
  • 需要留意要给子元素留有足够空间，否则会不显示
.children
    position: absolute;
    top: 0
    bottom: 0
    margin: auto 0

2.8、grid​

使用场景：

  • grid 布局的场合
.parent
    display: grid;
    justify-items: center; // 水平居中
    align-items: center;   // 垂直居中

三、模板样式​

水平居中​

  • 模板
/* 1、【margin】 */
horizontal-margin-children()
  margin 0 auto

/* 2、子元素用了【float】的居中方式 */
horizontal-float-parent()
  width fit-content
  margin 0 auto

horizontal-float-children()
  float left

/* 3、【绝对位置】配合【translateX】 */
horizontal-transform-translate-children()
  position absolute
  left 50%
  transform translateX(-50%)

/* 4、 【绝对定位】配合【margin】-1 */
:root
  --parent-width 100px

horizontal-transform-margin-parent()
  width var(--parent-width)

horizontal-transform-margin-children()
  position absolute
  left 50%
  margin-left -0.5 * var(--parent-width)

/* 5、 【绝对定位】配合【margin】-2 */
horizontal-transform-margin-children()
  position absolute
  left 0
  right 0
  margin 0 auto

/* 6、flex 水平居中 */
horizontal-flex-parent()
  display flex
  justify-content center
  • 使用
@import 'center.styl'

xxxx{
    horizontal-transform-margin-children()
}