元素居中

最近在面试，现在有点不想学习（其实不是有点，是很不想学习），就实践下面试被问的面试题吧

本文总结了垂直居中（6种方法），水平居中（5种方法），以及他们适用的范围。

将分为三部分： 公共代码，垂直居中，水平居中

公共样式、

定义了高度，只是方便查看，实际使用场景可能更复杂，但是垂直居中必然是父盒子有高度，水平居中必然是父盒子有高度

<style>
    .container {
        border: 1px solid red;
        height: 200px;
        width: 200px
    }
    .content {
        height: 50px;  width: 100px; background-color: red;
    }
</style>

垂直居中

方法一： 文本元素相对父盒子居中

适用场景： 因为是使用的行高属性，所以只适合单行文本的情况
注意：

• line-height属性是会继承，所以场景2也是可以居中的
• line-height: 1.5;行高是当前盒子字体的大小 * 15, content的字体大小 * 1.5
• line-height: 150;行高是设置line-height的盒子字体大小 * 150%，container的字体大小 * 150%；

// 情景一
<div class="container" style="line-height: 200px">文字相对盒子居中</div>

// 情景二
<div class="container" style="line-height: 200px">
    <div class="content">123123</div>
</div>

方法二 postion + margin

使用场景：单独对某一个元素进行居中显示。

同时设置了top和bottom，top优先级更高

<div  class="container" style="position: relative;">
    <div  class="content" style="position: absolute; top: 0; bottom: 0;margin: auto">内部盒子</div>
</div>

方法三 postion+transform

使用场景：单独对某一个元素进行居中显示。

• top: 50%是以父盒子的高度作为base进行计算的
• transform: translateY(-50%)是以盒子自身高度作为base计算的

<div  class="container" style="position: relative;">
    <div  class="content" style="position: absolute; top: 50%; transform: translateY(-50%);">内部盒子</div>
</div>

方法四 flex + align-item

适用场景：将子元素（一个或多个）都垂直居中

align-item 控制交叉轴上对其的方式

<div class="container" style="display: flex; align-items: center; ">
    <div class="content" style="width: 80px;">内部盒子</div>
    <div class="content" style="width: 80px;">内部盒子</div>
</div>

方法五 grid + align-item

适用场景：将子元素（一个或多个）都垂直居中

flex是一维布局，grid是二维布局

// 情景一：只有一个子元素
<div class="container" style="display: grid; align-content: space-evenly;">
   <div class="content" style="width: 80px;">内部盒子</div>
</div>

// 情景二 多个子元素
<div class="container" style="display: grid; align-content: space-evenly; grid-template-columns: repeat(3, 100px);">
    <div class="content" style="width: 80px;">内部盒子</div>
    <div class="content" style="width: 80px;">内部盒子</div>
</div>

方法六 display + vertical-align

适用场景：只有一个子元素（多个的时候，建议用div进行包裹）

<div class="container" style="display: table-cell; vertical-align: middle;">
    <div class="content">内部盒子</div>
</div>

水平居中

整体思路和垂直居中差不多

方法一 文字相对盒子居中

<div  class="container" style="text-align: center;">文字相对盒子居中</div>

方法二 margin

<div  class="container" style="position: relative;">
    <div class="content" style="margin: auto">内部盒子</div>
</div>

方法三 postion+transform

<div  class="container" style="position: relative;">
    <div class="content" style="position: absolute; left: 50%; transform: translateX(-50%);">内部盒子</div>
</div>

方法四 flex

<div class="container" style="display: flex; justify-content: center;">
    <div class="content">内部盒子</div>
</div>

方法五 grid

<div class="container" style="display: grid; justify-content: center">
    <div class="content">内部盒子</div>
</div>