Common element centered structure (with illustration)

Time:2020-10-25

1. The text is centered horizontally and vertically in the container

TAC = text align: Center; center horizontally

vam = vertical-align: middle;

1.1 table(table + tac + vam)

Common element centered structure (with illustration)

Parent container: display: table;
Sub container: display: table cell;
       text-align: center;
       vertical-align: middle;
<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
</div>
.container {
    display: table;
}
.box {
    display: table-cell;
    width: 150px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #00f
}

1.2. height & line-height + tac

Common element centered structure (with illustration)

Container: sets the height
                  Set line height to be the same height as height
                   text-align: center;

The HTML structure is the same as 1. But the parent element container is not required

.box {
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px solid #00f
}

2. The child element is horizontally and vertically centered in the parent element

posa = position: absolute;

2.1 positioning + transform

Common element centered structure (with illustration)

The parent container has one of the positions of relative, absolute and fixed
Sub container: position:absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%);
<div class="container">
    < div class = "box box1" > box < / div >
</div>
.container {
    margin-top: 200px;
    margin-left: 200px;
    width: 450px;
    height: 450px;
    border: 2px solid #be572a;
    
    position: relative;
}
.box {
    width: 100px;
    height: 100px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    border: 1px solid #00f
}

When absolute positioning is set for the child container, the aspect ratio from the parent container isBased on the width and height of the parent container

So we need to set top: 50%; left: 50%;
Common element centered structure (with illustration)

At this point, we can see that only the top left corner of the box is horizontally and vertically centered

Then, we also need to “move back”; the translate set for the child container isAccording to its width and heightSo we can get the horizontal and vertical center of the box by moving back 50% of its width and height

Add: since translate moves its own width and height, ifParent container has fixed width and height, the sub container can be setmargin-topandmargin-leftIt can also achieve the effect of horizontal and vertical center

2.2 display:flex

In order to distinguish from the above example, the width and height of sub elements are expanded

Common element centered structure (with illustration)

Parent element: display: Flex; align items: Center; justify content: Center;

Parent elementAfter setting flex, set justify content and align items to control the alignment of child elements on the main axis and cross axis

<div class="container">
    < div class = "box box1" > I'm flex < / div >
</div>
.container {
    margin-top: 200px;
    margin-left: 200px;
    width: 450px;
    height: 450px;
    border: 2px solid #be572a;
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    width: 150px;
    height: 150px;
    border: 1px solid #00f
}

3. Horizontal center

1.1 margin 0 Auto

Common element centered structure (with illustration)

The parent container has one of the positions of relative, absolute and fixed
Sub container: position:absolute;  left: 0; right: 0; margin: 0 auto;
<div class="container">
    < div class = "box box1" > left right pulls the width, and margin 0 auto controls the horizontal center < / div >
</div>
.container {
    margin-top: 200px;
    margin-left: 200px;
    width: 450px;
    height: 200px;
    border: 2px solid #be572a;
    position: relative;
}
.box {
    width: 200px;
    height: 150px;

    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;

    border: 1px solid #00f
}

In fact, some people may wonder that if the parent container has already set the width and height, would it be better to use margin 0 auto?

It was in theAbsolute positioning is not set for the child containerIn this case, you can directly margin 0 auto

If we set theAbsolute positioningEven if the parent container is set with width and height, the child container margin 0 auto will not have a horizontal center effect

 /*left: 0; right: 0;*/

Common element centered structure (with illustration)