居中布局的方式
初始状态
<!DOCTYPE html>
<html lang="en">
<head><style>.outer {width: 100px;height: 100px;border: 1px solid #f00;}.inner {width: 30px;height: 30px;background-color: #000;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>
1、普通方式
定宽
水平居中
.inner {margin: 0 auto;
}
文本水平居中，对行内元素/行内块级元素有效
text-align: center;
文本垂直居中，这两个属性设置一样大小
height: 30px;
line-heigth: 30px;
2、定位
定宽
<!DOCTYPE html>
<html lang="en">
<head><style>.outer {width: 100px;height: 100px;border: 1px solid #f00;// 新增position: relative;}.inner {width: 30px;height: 30px;background-color: #000;// 新增position: absolute;left: 50%;top: 50%;// height的一半margin-top: -15px;// width的一半margin-left: -15px;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>
支持宽高未知
<!DOCTYPE html>
<html lang="en">
<head><style>.outer {width: 100px;height: 100px;border: 1px solid #f00;// 新增position: relative;}.inner {width: 30px;height: 30px;background-color: #000;// 新增position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>
3、flex
支持宽高未知
.outer {display: flex;justify-content: center;align-items: center;
}
4、网格布局grid
支持宽高未知
可以看我的这篇 css：网格布局
.outer {display: grid;justify-content: center;align-items: center;
}
5、表格布局
支持宽高未知
<!DOCTYPE html>
<html lang="en">
<head><style>.outer {width: 100px;height: 100px;border: 1px solid #f00;display:table-cell;text-align: center;vertical-align: middle;}.inner {display: inline-block;width: 30px;height: 30px;background-color: #000;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>
总结
方式一：定宽居中适合
方式二：能不用尽量不用，因为 position: absolute; 会脱离文档流，除非那种确实要脱离文档流的布局再用
方式三：常用
方式四：兼容性不如方式三
方式五：需要兼容IE的才使用
