1.不固定宽高实现水平居中,垂直居中
一共有3种方法
- flex
- display: table-cell; vertical-align: middle;text-align: center;
- transform: translate(-50%, -50%);
方法二:
.box { width: 300px; height: 300px; background-color: red; display: table-cell; vertical-align: middle; text-align: center; } .sub { background-color: yellow; display: inline-block; }
方法三:
.box { width: 300px; height: 300px; background-color: red; position: relative; } .sub { border: 1px solid #ddd; position: absolute; text-align: center; left: 50%; top: 50%; background: yellow; transform: translate(-50%, -50%); }