css垂直左右居中的几种方案

前言

一般有关css布局，我都会在以下五种布局方案下考虑：

1、flex布局

2、grid布局

3、绝对定位布局

4、table布局

5、浮动布局

但是浮动布局似乎不能独立实现垂直左右居中，所以只考虑前四种布局方案的实现。

基础样式

通用的基础样式就先定义了

.area {
    margin: 20px 0;
}
.prent {
    width: 100%;
    height: 300px;
    border: 1px solid black;
}
.box {
    width: 100px;
    height: 100px;
    background: red;
}

flex布局

css部分

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

html部分

<div class="flex area">
    <header class="title">flex 方案</header>
        <div class="prent">
        <div class="box"></div>
    </div>
</div>

实现效果

grid布局 方案一

css部分

.grid-1 .prent {
    display: grid;
    place-items: center;
}

html部分

<div class="grid-1 area">
    <header class="title">grid 方案1</header>
        <div class="prent">
        <div class="box"></div>
    </div>
</div>

实现效果

可以看到网格布局还是相当方便的

grid布局 方案二

css部分

.grid-2 .prent {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
}
.grid-2 .box {
    grid-area: e;
    place-self: center;
}

html部分

<div class="grid-2 area">
    <header class="title">grid 方案2</header>
        <div class="prent">
        <div class="box"></div>
    </div>
</div>

实现效果

但看一个元素的布局效果的话，比起方案一，方案二的实现就要复杂得多。

绝对定位

css部分

.position .prent {
    position: relative;
}
.position .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

html部分

<div class="position area">
    <header class="title">绝对定位 方案</header>
    <div class="prent">
    	<div class="box"></div>
    </div>
</div>

实现效果

绝对定位的布局方案可以运用在浮动元素上。

表格布局

css部分

.table .prent {
    display: table-cell;
    width: 800px;
    vertical-align: middle;
}
.table .box {
    margin: auto;
}

html部分

<div class="table area">
    <header class="title">table 方案</header>
        <div class="prent">
        <div class="box"></div>
    </div>
</div>

实现效果

其他方法

当父类是一个正方形时

实现原理 思路与绝对定位类似，由原来的top、left换成了margin：50%； 由于margin 与 padding的百分比是按照父类元素的宽度计算，所以只适合父类是正方形时。

css 部分

.parent {
  width: 300px;
  height: 300px;
  display: block;
  border: 1px solid black;
}
.children {
  width: 50px;
  height: 50px;
  background: red;
  float: left;
  margin: 50%;
  transform: translate(-50%, -50%);
}

html部分

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

实际效果

!