1.å
¼å®¹æ§ä¸éç主æµç¨æ³æ¯ï¼ï¼ä½ï¼è¿ç§æ¹æ³æä¸ä¸ªå¾ææ¾çä¸è¶³ï¼å°±æ¯éè¦æåç¥éå
ç´ ç尺寸ãå¦åmarginè´å¼çè°æ´æ æ³ç²¾ç¡®ãæ¤æ¶ï¼å¾å¾è¦åå©JSè·å¾ãï¼
.conter{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* é«åº¦çä¸å */
margin-left: -300px; /* 宽度çä¸å */
}
2.CSS3çå
´èµ·ï¼ä½¿å¾æäºæ´å¥½ç解å³æ¹æ³ï¼å°±æ¯ä½¿ç¨transform代æ¿margin. transformä¸translateå移çç¾åæ¯å¼æ¯ç¸å¯¹äºèªèº«å¤§å°çï¼å¯ä»¥è¿æ ·
.conter{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为èªèº«å°ºå¯¸çä¸å */
}
3.margin:autoå®ç°ç»å¯¹å®ä½å
ç´ çå±
ä¸(ä¸ä¸å·¦å³å0ä½ç½®å®ä½ï¼margin: auto)
.conter{
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* æäºè¿ä¸ªå°±èªå¨å±
ä¸äº */
}
4.使ç¨css3ç模å:flexå¸å±ãï¼ä¸èèä½çæ¬æµè§å¨çæ
åµä¸ï¼
温馨提示:内容为网友见解,仅供参考