水平垂直居中的布局（定宽高和不定宽高）_综合

一、定宽高

1、绝对定位和负margin值：

  <section class="absolute"><div></div></section><style>section{display:block;     }section.absolute {width: 100px;height: 100px;border: 1px solid #ccc;position: relative;}.absolute div {position: absolute;width: 50px;height: 50px;left: 50%;top: 50%;margin: -25px 0 0 -25px;background-color: yellow;}</style>

2、绝对定位加 transform:

<section class="absoluteTransform"><div></div>
</section>
<style>section{display:block;}section.absoluteTransform {width: 100px;height: 100px;border: 1px solid #ccc;position: relative;}.absoluteTransform div {position: absolute;width: 50px;height: 50px;left: 50%;top: 50%;background-color: yellow;-webkit-transform: translate(-50%, -50%);}
</style>

3、绝对定位 + left/right/bottom/top + margin:

<section class="absoluteM"><div></div>
</section>
<style>section{display: block;}section.absoluteM {width: 100px;height: 100px;border: 1px solid #ccc;position: relative;}.absoluteM div {width: 50px;height: 50px;background-color: yellow;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}          
</style>

4、flex 布局：

    <section class="flex"><div></div></section><style>section{display: block;}section.flex {width: 100px;height: 100px;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;}.flex div {width: 50px;height: 50px;background: yellow;}</style>

5、grid布局：

    <section class="grid"><div></div></section><style>section{display: block;}section.grid {width: 100px;height: 100px;border: 1px solid #ccc;display: grid;}.grid div {width: 50px;height: 50px;background-color: yellow;margin: auto;}</style>

6、table 布局：

    <section class="table"><div></div></section><style>section{display: block;}section.table {width: 100px;height: 100px;border: 1px solid #ccc;display: table-cell;text-align: center;vertical-align: middle;}.table div {width: 50px;height: 50px;background-color: yellow;display: inline-block;}</style>

二、不定宽高

1、绝对定位加 transform:

<div class="box"><div class="children-box">111111</div></div><style>.box {width: 200px;height: 200px;border: 1px solid red;position: relative;
}
.children-box {position: absolute;background: yellow;left: 50%;top: 50%;transform: translate(-50%, -50%);
}       
</style>

2、table布局：

<div class="box"><div class="children-box">111111</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid red;display: table-cell;text-align: center;vertical-align: middle;
}
.children-box {background: yellow;display: inline-block;
}
</style>

3、flex 布局：

<div class="box"><div class="children-box">11111111</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid red;display: flex;justify-content: center;align-items: center;
}
.children-box {background: yellow;
}
</style>

4、flex 变异布局：

<div class="box"><div class="children-box">11111111</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid red;display: flex;
}
.children-box {background: yellow;margin: auto;
}
</style>

5、grid + flex 布局：

<div class="box"><div class="children-box">11111111</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid red;display: grid;
}
.children-box {background: yellow;align-self: center;justify-self: center;
}
</style>

6、grid + margin 布局：

<div class="box"><div class="children-box">11111111</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid red;display: grid;
}
.children-box {background: yellow;margin: auto;
}
</style>