前端队长の技术博客

  1. 水平居中
    1. 1、有固定的宽度
    2. 2、无固定的宽度
  2. 垂直居中
    1. 1、有固定的宽度
    2. 2、无固定的宽度
  3. 水平垂直居中
    1. 1、有固定的宽度
      1. 方法1:absolute + 负margin
      2. 方法2:absolute + margin: auto
    2. 2、无固定的宽度
      1. 方法1:absolute + transform反向偏移
      2. 方法2:flex布局

内联元素(inline)和行内块元素(inline-block)的水平垂直居中很简单,设置line-height和text-align: center就可以了。

这里主要说块级元素(block)的水平垂直居中方式。

水平居中

整体示例代码:

<style>
    .center{
        border:1px solid red;
        /* 填入下列样式代码 */
    }
</style>

<div class="center">水平居中</div>

1、有固定的宽度

原理:由于left偏移了父对象的50%宽度,所以需要利用margin反向偏移居中块的50%宽度。

position: absolute;
left: 50%;
margin-left: -xxpx;

原理:利用css定位规则,设置左右、上下方向定位为0,margin为auto,让css根据定位自动计算margin值,用hack的方式实现居中。

position: absolute;
left: 0;
right: 0;
margin: 0 auto;

2、无固定的宽度

注意:无固定的宽度能做到的,肯定是可以作用在“有固定的宽度”上的,所以就不在“有固定的宽度”中列出。

实现原理:与采用负margin的方式原理类似,不同点是使用了transform来代替margin做反向偏移,由于transform的计算基准是元素本身,所以这里可以用50%来做反向偏移。

position: absolute;
left: 50%;
transform: translateX(-50%);
display: table;
margin:0 auto;
父元素设置
	display:flex;
	justify-content:center;

垂直居中

1、有固定的宽度

方法1:absolute + 负margin

方法2:absolute + margin: auto

2、无固定的宽度

方法1:absolute + transform反向偏移

方法2:flex布局

水平垂直居中

综合以上水平居中和垂直居中方式可以得到:

1、有固定的宽度

方法1:absolute + 负margin

方法2:absolute + margin: auto

2、无固定的宽度

方法1:absolute + transform反向偏移

方法2:flex布局

(完)