垂直水平居中的几种方法总结

垂直水平居中的几种方法

水平居中

1. 行内元素

• text-align: center;
• 将其父元素设置为块级元素，再给父元素设置 text-align: center;

2. 块级元素

• 方案一：常规方法(宽度是否存在两种情况)(使盒子水平居中)

  • 宽度存在:
    设置子元素为 margin:0 auto;
  • 宽度不存在:
    默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或**display: inline,**即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

• **方案二:使用定位属性 **

  • 定宽度：
    设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);**
  • 不定宽度：
    利用css3新增属性transform: translateX(-50%);

• 方案三使用flexbox布局实现（宽度定不定都可以）

• 使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

  垂直居中

  1、行内元素

• 单行的行内元素:设置单行行内元素的"行高等于盒子的高"即可

• 多行的行内元素：使用给父元素设置display:table-cell;和vertical-align: middle;**属性；

2. 块级元素

方案一：使用定位

设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

不定高度：利用css3新增属性transform: translateY(-50%);

方案二：使用flexbox布局实现（高度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

水平垂直居中

• 已知高度和宽度的元素

方案一：**设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方案二：**设置父元素为相对定位，给子元素设置绝对定位，left:50%;top50%;transform:translateX(-50%)translateY（-50%)

• ** 未知高度和宽度的元素**

**方案一：**使用定位属性：

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

**方案二：**使用flex布局实现

设置父元素为flex定位，justify-content: center; align-items: center;