前端面试重点之--居中问题

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

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

[toc]

1、水平居中

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只对行内元素有效，对块元素无效，不能设置块元素的对齐方式；

2、垂直居中

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;
}

3、水平垂直居中

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

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;
}

（完）