I would like to ask the principle of display:table and margin:0 auto to center the elements.

A common way to center

horizontally is to set the display:table,margin:0 auto, code for child elements as follows

<style>
    .parent_3 {
    }
    .child_3 {
        display: table;
        margin: 0 auto; 
    }
</style>
<section class="parent parent_3">
    <article class="child child_3"></article>
</section>

the effect of the browser is shown in the figure

clipboard.png
both table and block can declare block-level elements, so why can"t block achieve this effect?
what are the performance characteristics of elements when display is table?

Css
Sep.08,2021

use the table tag. Table itself is not a block-level element. If you do not set a width for it, its width is "propped up" by the width of the internal element, but even if you do not set its width, only setting margin-left:auto; and margin-right:auto; can achieve horizontal centering!
contains the parts that need to be centered in the table tag, and sets margin-left:auto; and margin-right:auto; for table. You can center the table level and indirectly center the part of the level that needs to be centered.
while using block, you need to know the width and height of the parent.

Menu