前端面试重点——居中问题

在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。本文汇总一些常见的居中方式以及一些注意点，权当学习笔记。

[toc]

一、水平居中

1. inline-block + text-align

确保子元素是行内块级元素后，给父元素 text-align: center; 这种情况对于子元素定宽或者不定宽都生效。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {text-align: center;}
.child {display: inline-block;}

2. table + margin

此时利用 table 的宽度是内容的宽度，且 table 可以使用 margin

<div class="parent">
    <div class="child">child</div>
</div>

.child {
    display: table;
    margin: 0 auto;
}

3. absolute + transform

确定父元素 相对定位后，将子元素通过绝对定位在父元素内实现居中。该方法适用于子元素定宽或者不定宽，万能方法。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {position: relative;}
.child {
    position: absolute;
    left: 50%;
    top: translateX(-50%);
}

4. flex + justify-content

弹性布局（flex 布局）也是常用来居中的方式，只需要给父级元素添加弹性布局格式，同时设置横轴对齐方式 justiify-content 来设置居中。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: flex;
    justify-content: center;
}

在选择居中对齐的时候，也可以通过考虑子元素的宽度是否确定，如果宽度确定，也可通过：margin: 0 auto; 实现水平居中。

注意点：

• text-align 用来设置元素中的的文本行内元素的对齐方式；
• text-align 只对行内元素有效，对块元素无效，不能设置块元素的对齐方式；

二、垂直居中

1. line-height = height（只适用于单行内行内元素）

这种方法在设置单行块的时候特别有效，需要知道父元素高度。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {height: 100px;}
.child {line-height: 100px;}

2. table-cell + vertical-align（单行，多行都可居中）

利用表格单元格的特性，单元格内支持居中。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: table-cell;
    vertical-align: middle;
}

3. absolute + transform

父元素相对布局，子元素绝对布局，适用很多场景。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {position: relative;}
.child {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

4. flex + align-item

flex 布局，通过纵向对齐 align-item 设置交叉轴对齐。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: flex;
    align-items: center;
}

三、水平垂直居中

将上面的水平居中方法和垂直居中方法结合起来就可以实现水平垂直居中。

1. inline-block + text-align + table-cell + vertical-align

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    diaplay: teable-cell;
    text-align: center;
    vertical-align: middle;
}
.child {display: inline-block;}

2. margin: auto

已知宽高的元素父元素相对定位，子元素绝对定位。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {positon: relative;}
.child {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

3. transform + translate

不管宽高是否给定，都可以使用父元素相对定位，子元素绝对定位。（未知宽高可能是行内元素）

<div class="parent">
    <div class="child">child</div>
</div>

.parent {positon: relative;}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4. flex

flex 布局，设置主轴和交叉轴的对齐方式。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

注意点：

1. 行内元素设置宽高是无效的，可以通过设置 line-height 实现行内元素高度的设置，行内元素设置 margin 或者 padding 只有左右有效，上下无效。
2. flex(ie 9 以上才支持) 的兼容性写法：

{
    display: -webkit-box;
    display: -webkit-flex;
     display: -moz-flex; 
      display: -ms-flexbox; 
      display: flex;
}

（完）