css面试题3：实现元素居中对齐的几种方式

xiaomomo
1,454 阅读3分钟

因为需要居中对齐的元素有可能会有position属性，所以先说一下relative和absolute一下区别

relative

  • 是相对于自身元素的定位，不会对别的元素产生干扰

absolute

  • 是相对于最近的一层父级元素的定位，如果没有找到具有定位元素的父级元素，则是相对于body元素的定位

水平居中的方式

  1. inline元素：text-align: center;
  2. block元素：margin: auto;
  3. absolute元素：left：50%，margin-left负值(这个值是居中元素的宽度的一半)
  4. block元素：设置position：relative，left：50%，子元素向左位移50%；transform: translateX(-50%)
  5. flex布局
  6. block元素：父元素：position:relative;子元素：absolute，left、right设为0，然后margin: auto

1. text-align: center 和 margin: auto比较简单，比如以下代码：

<style>
    .inline-item {
        background-color: #ccc;
        text-align: center;
    }
    .block-parent {
        border: 1px solid red;
        height: 100px;
    }
    .block-item {
        height: 60px;
        width: 100px;
        background-color: #ccc;
        margin: 0 auto;
    }
</style>
<body>
    <div class="inline-item">
        <span>inline元素</span>
    </div>
    <div class="block-parent">
        <div class="block-item">block元素</div>
    </div>
</body>

效果如下：

image.png

2. 接下来看absolute元素

    .absolute-parent {
        border: 1px solid red;
        height: 100px;
    }
    .absolute-item {
        height: 60px;
        width: 100px;
        background-color: #ccc;
        position: absolute;
        left: 50%;
    }
    <div class="absolute-parent">
        <div class="absolute-item">absolute元素</div>
    </div>

image.png

子div设置了left:50%以后，最左边就会移动到父div的中间线位置，所以为了居中，还需要把子div向左移动(-子div宽度/2)px，所以要加上margin-left：-50px;

.absolute-item {
    height: 60px;
    width: 100px;
    background-color: #ccc;
    position: absolute;
    left: 50%;
    margin-left: -50px; /*把子div向左移动宽度的一般距离*/ 
}

效果如下：

image.png

3. block元素：子元素设置position：relative，left：50%，子元素向左位移50%；transform: translateX(-50%)

.transform-parent {
    border: 1px solid red;
    height: 100px;
}
.transform-item {
    height: 60px;
    width: 100px;
    background-color: #ccc;
    position: relative;
    left: 50%;
    transform: translateX(-50%);/*向左位移50%的宽度*/
}
<div class="transform-parent">
    <div class="transform-item">transform元素</div>
</div>

4. flex布局

<style>
    .flex-parent {
        display: flex;
        border: 1px solid red;
        height: 100px;
        justify-content: center;
    }
</style>
<div class="flex-parent">
    <div class="flex-item">flex元素</div>
</div>

image.png

垂直居中的方式

  1. inline元素: line-height等于height的值可以实现近似居中（为什么会近似居中而不是居中，请看这篇详情）
  2. block元素：flex布局
  3. block元素：父元素：position:relative;子元素：absolute，margin-top负值（height/2）
  4. block元素：子元素：position:relative;，transform: translateY(-50%)
  5. block元素：父元素：position:relative;子元素：absolute，top、bottom设为0，然后margin: auto

1. inline元素

.inline-parent {
    height: 100px;
    border: 1px solid #d8d8d8;
    line-height: 100px;
}
<div class="inline-parent">
    <span>inline元素</span>
</div>

image.png

2. block元素 flex布局

.block-parent {
    height: 100px;
    border: 1px solid #d8d8d8;
    display: flex;
    align-items: center;
}
.block-item {
    height: 50px;
    width: 50px;
    background-color: darkturquoise;
}
<div class="block-parent">
    <div class="block-item">block元素</div>
</div>

image.png

3. block元素 父元素：position:relative;子元素：absolute，margin-top负值（height/2）

.absolute-parent {
    height: 100px;
    border: 1px solid #d8d8d8;
    position: relative;//必须设置position属性，不然子元素就不是相对于父元素定位了
}
.absolute-item {
    height: 50px;
    width: 100px;
    background-color: darkturquoise;
    position: absolute;
    top: 50%;// 此时子元素的上边框是在父元素的垂直中线位置，所以需要用margin-top来向上移动
    margin-top: -25px;
}
<div class="absolute-parent">
    <div class="absolute-item">absolute元素</div>
</div>

image.png

4. transform实现方式

.transform-parent {
    height: 100px;
    border: 1px solid #d8d8d8;
}
.transform-item {
    height: 50px;
    width: 100px;
    background-color: darkturquoise;
    position: relative;
    top:50%; /*左上角在父元素的左边框的中间位置，所以需要把子元素向上位移50%的高度 */
    transform: translateY(-50%)/*向上位移50%子元素的高度*/
}
<div class="transform-parent">
    <div class="transform-item">transform元素</div>
</div>

5. block元素：父元素：position:relative;子元素：absolute，top、bottom设为0，然后margin: auto

.margin-parent {
    height: 100px;
    border: 1px solid #d8d8d8;
    position: relative;
}
.margin-item {
    height: 50px;
    width: 100px;
    background-color: darkturquoise;
    position: absolute;
    top:0;
    bottom: 0;
    margin: auto;
}
<div class="margin-parent">
    <div class="margin-item">margin元素</div>
</div>
avatar
文章
阅读
粉丝