在CSS中,要实现未知高度的垂直和水平居中自适应问题,可以使用以下几种方法:
1、Flexbox布局:
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }
2、Grid布局:
.container { display: grid; place-items: center; /* 同时实现水平和垂直居中 */ }
3、使用绝对定位和transform:
.container { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
4、使用table-cell方式:
.container { display: table; width: 100%; height: 100%; /* 需要设置高度 */ } .child { display: table-cell; vertical-align: middle; text-align: center; }
是几种常用的实现未知高度元素垂直和水平居中的方法,根据实际需求选择合适的方法。