jsÔõÑùÈÃdivÖеÄÎÄ×Ö¾ÓÖÐ
ÔÚ div ÔªËØÖоÓÖÐÎÄ×ÖµÄÒªÁìÓУº1. ʹÓà text-align ÊôÐÔÉèÖöÔÆë·½·¨Îª¾ÓÖС£2. ÍŽá margin: auto; ºÍ text-align: justify; ʵÏÖˮƽºÍ±ÊÖ±¾ÓÖС£3. ½« div ÉèÖÃΪ table£¬²¢Ê¹Óà table µ¥Î»¸ñʵÏÖÎÄ×Ö¾ÓÖС£4. ½ÓÄÉ flexbox ½á¹¹£¬Í¨¹ý justify-content ºÍ align-items ÊôÐÔ»®·ÖÔÚˮƽºÍ±ÊֱƫÏòÉϽ«×ÓÔªËؾÓÖС£
ÔõÑùÈà div ÖеÄÎÄ×Ö¾ÓÖÐ
ÔÚ div ÔªËØÖоÓÖÐÎÄ×ÖÓм¸ÖÖÒªÁ죺
1. text-align ÊôÐÔ
div { text-align: center; }
µÇ¼ºó¸´ÖÆ
´ËÊôÐÔÉèÖà div ÖÐËùÓÐÎı¾ÔªËصĶÔÆë·½·¨Îª¾ÓÖС£
2. margin: auto;
div { margin: auto; text-align: justify; }
µÇ¼ºó¸´ÖÆ
´ËÒªÁìÉèÖà div µÄÎı¾ÔªËØÔÚˮƽƫÏò×Ô¶¯¾ÓÖС£ËüÓë text-align: justify; ÊôÐÔÍŽáʹÓ㬿ÉʵÏÖ±ÊÖ±ºÍˮƽ¾ÓÖС£
3. table µ¥Î»¸ñ
div { display: table; } div p { display: table-cell; text-align: center; vertical-align: middle; }
µÇ¼ºó¸´ÖÆ
´ËÒªÁ콫 div ÉèÖÃΪ table£¬²¢½«ÆäÖеÄÎı¾ÔªËØÉèÖÃΪ table µ¥Î»¸ñ¡£Í¨¹ýÉèÖõ¥Î»¸ñµÄ¶ÔÆë·½·¨Îª¾ÓÖУ¬¿ÉÒÔʵÏÖÎÄ×Ö¾ÓÖС£
4. flexbox
div { display: flex; justify-content: center; align-items: center; }
µÇ¼ºó¸´ÖÆ
´ËÒªÁìʹÓà flexbox ½á¹¹£¬Í¨¹ýÉèÖà justify-content ºÍ align-items ÊôÐÔ»®·ÖÔÚˮƽºÍ±ÊֱƫÏòÉϽ«×ÓÔªËؾÓÖС£
ÒÔÉϾÍÊÇjsÔõÑùÈÃdivÖеÄÎÄ×Ö¾ÓÖеÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡