如何用CSS让一个容器水平垂直居中？

- 第一类（被居中的元素有固定的宽高）

效果：

第一种方法（绝对定位 + 负margin）

<div class="div1"> <div class="div2"></div> </div><style type="text/css"> .div1{width: 100px;height: 100px;border: 1px solid #000000;position: relative;}.div2{width: 40px;height: 40px;background-color: green;position: absolute;top: 50%;left: 50%;margin-top: -20px;margin-left: -20px;}</style>

2.第二种方法（绝对定位 + margin: auto）

<div class="div1"> <div class="div2"></div> </div><style type="text/css"> .div1{width: 100px;height: 100px;border: 1px solid #000000;position: relative;}.div2{width: 40px;height: 40px;background-color: green;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style>

3.第三种方法（flex）

<div class="div1"> <div class="div2"></div> </div><style type="text/css"> .div1{width: 100px;height: 100px;border: 1px solid #000000;display: flex;}.div2{width: 40px;height: 40px;background-color: green;margin: auto;}</style>

- 第二类（被居中的元素任意高度）

效果：

或

方法：display:table-cell:

<div class="div1"> <div class="div2">张三丰</div> </div><style type="text/css"> .div1{width: 100px;height: 100px;border: 1px solid #000000;display: table-cell;vertical-align: middle;}.div2{width: 40px;background-color: green;margin: 0 auto;}</style>

- 第三类（被居中的元素 宽高都不限制）

效果：

1.CSS3 flex

<div class="div1"> <div class="div2">小阿三</div> </div><style type="text/css"> .div1{width: 100px;height: 100px;border: 1px solid #000000;display: flex;align-items: center;justify-content: center;}.div2{background-color: green;}</style>

2.transform:

<div class="div1"> <div class="div2">小阿三</div> </div><style type="text/css"> .div1{width: 100px;height: 100px;border: 1px solid #000000;position: relative;}.div2{background-color: green;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>

- 第四类（让图片居中）

效果：

<div class="div1"> <img src="images/2.png" alt=""> </div><style type="text/css"> .div1{width: 100px;height: 100px;border: 1px solid #000000;display: table-cell;vertical-align: middle;text-align: center;}</style>