盒子水平居中的几种方式

1.父元素加 display: flex; justify-content: center; align-items: center;

2.子绝父相  子 left: 50%; top; 50%; 负margin(盒子宽高的一半);

3.子绝父相  子 left: 50%; top; 50%; transform: translate(-50%, -50%);

4.子绝父相  子 top: 0; right: 0; left: 0; bottom: 0; margin: auto;

5.父 display: flex;  子元素 margin: auto;

6.子绝父相   子 left: calc(50% - 子元素自身的宽度的一半); top: calc(50% - 子元素高度一半);

7.table-cell(把盒子变成表格单元格 单元格居中)

  父 display: table-cell; vertical-align: middle; 子 margin: auto;

posted @ 2022-08-03 22:52  简法  阅读(148)  评论(0)    收藏  举报