一、父子元素高度确定
简单粗暴, 直接通过设置合适的
padding或margin实现居中
<style>css">.p {padding: 20px 0;background: rgba(255, 0, 0, 0.1);}.c {width: 40px;height: 20px;background: blue;}
</style>
<div class="p"><div class="c"></div>
</div>
二、Flex(弹性) 布局
<style>css">.p {height: 100px;background: rgba(255, 0, 0, 0.1);display: flex;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */}.c {width: 40px;height: 20px;background: blue;}
</style>
<div class="p"><div class="c"></div>
</div>
三、Grid(网格) 布局
<style>css">.p {height: 100px;background: rgba(255, 0, 0, 0.1);display: grid;place-items: center; /* 直接水平垂直居中 */}.c {width: 40px;height: 20px;background: blue;}
</style>
<div class="p"><div class="c"></div>
</div>
四、子元素通过「绝对定位 + 偏移」实现居中
4.1 子元素高度不固定, 使用 transform 进行偏移
依据: 绝对定位百分比, 是相对于
父元素进行计算、transform百分比, 则是相对于自身进行计算
<style>css">.p {height: 100px;background: rgba(255, 0, 0, 0.1);position: relative;}.c {width: 40px;background: blue;top: 50%;position: absolute;transform: translateY(-50%);}
</style>
<div class="p"><div class="c">1111<br>2222</div>
</div>
4.2 子元素高度固定, 直接使用 margin 进行偏移
依据: 绝对定位百分比, 是相对于
父元素进行计算
<style>css">.p {height: 100px;background: rgba(255, 0, 0, 0.1);position: relative;}.c {width: 40px;height: 40px;background: blue;position: absolute;top: 50%; /* 该百分比, 相对于父元素高度进行计算 */margin-top: -20px; /* 手动计算, 等于高度的一半 */}
</style>
<div class="p"><div class="c"></div>
</div>
4.3 「补充」margin、padding 百分比计算方式
margin、padding上下两个方向的百分比, 相对于父元素自适应的一边进行计算, 默认情况下是根据父元素宽度进行计算的 (因为块元素默认宽度自适应), 之所以要相对于自适应一边进行计算, 是为了避免在未设置宽高情况下, 子元素设置了边距, 引起容器尺寸的变化, 从而造成百分比重新计算, 引起死循环
<style>css">.p {width: 200px;height: 400px;background: rgba(255, 0, 0, 0.1);}.c {margin: 10%; /* 上下左右边距都, 相对于父元素宽度: 20px */padding: 10%; /* 上下左右边距都, 相对于父元素宽度: 20px */display: inline-block;background: blue;}
</style>
<div class="p"><div class="c"></div>
</div>
通过
writing-mode: vertical-lr可元素内容 (文字、子元素) 从上到下垂直流动, 元素将从宽度自适应改为高度自适应, 这时其子元素paddinmargin百分比将相对于父元素的高度进行计算
<style>css">.p {writing-mode: vertical-lr; /* 元素内容从上到下垂直流动、高度将自适应*/width: 200px;height: 400px;background: rgba(255, 0, 0, 0.1);}.c {margin: 10%; /* 上下左右边距都, 相对于父元素宽度: 40px */padding: 10%; /* 上下左右边距都, 相对于父元素宽度: 40px */display: inline-block;background: blue;}
</style>
<div class="p"><div class="c"></div>
</div>
五、自适应特性 + margin: auto
众所周知
margin: auto, 可以很容器实现元素的水平居中, 而之所以能够实现水平居中, 是因为父元素宽度自适应, 只有在自适应情况下margin: auto才能正确计算出合适的值
<style>css">.p {width: 200px;height: 200px;background: rgba(255, 0, 0, 0.1);}.c {width: 40px;height: 40px;background: blue;margin: auto;}
</style>
<div class="p"><div class="c"></div>
</div>
从上面例子可以看出,
margin: auto之所以能实现水平居中, 就是因为父元素宽度自适应了, 那么很自然就可以想到, 如果可以使父元素高度自适应, 那么我们就可以借用margin: auto实现元素的垂直居中
5.1 通过 writing-mode 使元素高度自适应
writing-mode属性定义了元素内容(文本、子元素)水平或垂直的排列方式, 其中vertical-lr属性值可使内容由水平流动改为垂直流动, 同时元素的宽度自适应也将变为高度自适应
<style>css">.p {width: 200px;height: 200px;background: rgba(255, 0, 0, 0.1);writing-mode: vertical-lr; /* 将子元素流向从水平改为垂直, 同时宽度自适应也将变为高度自适应 */}.c {width: 40px;height: 40px;background: blue;margin: auto;}
</style>
<div class="p"><div class="c"></div>
</div>
5.2 为子元素设置绝对定位, 使得在对应方向上具有自适应特性
<style>css">.p {width: 200px;height: 200px;background: rgba(255, 0, 0, 0.1);position: relative;}.c {width: 40px; /* 需要设置宽度 */height: 40px; /* 需要设置高度 */background: blue;top: 0;left: 0;right: 0;bottom: 0;position: absolute;margin: auto;}
</style>
<div class="p"><div class="c"></div>
</div>
六、子元素为文本或内联元素(包括内联块元素)
6.1 line-height 一把梭哈
对于父元素
高度确定, 且子元素是单行文本或者内联元素, 可直接通过line-height实现居中
<style>css">.p {line-height: 80px;background: rgba(255, 0, 0, 0.1);}.inline-block {display: inline-block;height: 20px;width: 40px;background: blue;}
</style>
<div class="p">11111111111111111111
</div>
<br/>
<div class="p"><div class="inline-block"></div>
</div>
6.2 伪元素(::after) + vertical-align
通过伪类创建一个
隐藏的内联元素, 高度为父元素高度, 并借用vertical-align使所有内容垂直居中
<style>css">.p {width: 200px;height: 200px;background: rgba(255, 0, 0, 0.1);}.p::after {content: '';height: 100%;display: inline-block;vertical-align: middle;}.c {width: 40px; /* 需要设置宽度 */height: 40px; /* 需要设置高度 */background: blue;display: inline-block;}
</style>
<div class="p"><div class="c"></div>
</div>
<br>
<div class="p">111111111111111111111
</div>
6.3 display: table-cell + vertical-align
<style>css">.p {width: 200px;height: 200px;background: rgba(255, 0, 0, 0.1);display: table-cell;vertical-align: middle;}.c {width: 40px; /* 需要设置宽度 */height: 40px; /* 需要设置高度 */background: blue;}
</style>
<div class="p"><div class="c"></div>
</div>
<br>
<div class="p">111111111111111111111
</div>
