In front-end development, we often need to center the elements horizontally and vertically. To this end, I specifically summarized the method of centering elements.

Horizontal center text align: Center;

If there is no floating, we can first set the block level element to be centered as inline / inline block, and then add the attribute text align: Center to its parent element; Just. If the block level element to be centered is directly an inline element (span, img, a, etc.), directly add the attribute text align: Center to its parent element; OK;

<div class="way way2">
  <img src="fj.jpg" alt="">
</div>

.way {
    border: 1px solid red;
    width: 250px;
}

.way img {
    max-width: 200px;
}

.way1 {
    text-align: center;
    font-size: 0px;
    //The browser will generate the default spacing between HTML images, and the parent element is set to font size: 0px; It can solve this problem well.
}

Use margin: 0 auto; horizontally

Premise: the centered element must be a block level element. If it is an inline element, you need to add the attribute display:block; And the element does not float.

.way2 img {
    display: block;
    margin: 0 auto;
}

<div class="way way2">
  <img src="fj.jpg" alt="">
</div>

Centering by positioning (offset value needs to be calculated)

Premise: you must know how to set the width and height of the element to be centered

.way3 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way3 img {
    width: 200px;
    height: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -70px;
}

Centering is realized for positioning (no need to calculate the offset value, margin: auto; used in combination with positioning in four directions)

The advantage of this method is that it does not need to know the width and height of elements, and the browser has good compatibility.

.way4 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way4 img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Positioning is used with css3 new attribute transform: translate (x,y)

The advantage of this method is that it does not need to know the width and height of the element, and it is used more in the mobile terminal, because the mobile terminal has good compatibility with the new attributes of css3.

.way5 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way5 img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

css3 new attribute calc() is used with positioning (you need to know the width and height of the element)

• Used to dynamically calculate the length value.
• It should be noted that a space should be reserved before and after the operator, for example: width: calc(100% - 10px);
• Any length value can be calculated using the calc() function;
• calc() function supports "+", "-", "*", "/" operations;
• The calc() function uses standard mathematical operation priority rules;

.way6 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way6 img {
    width: 200px;
    height: 140px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 70px);
}

jquery enables horizontal and vertical centering

The principle of jquery to realize horizontal and vertical play is to set the css of div through jquery to obtain the left and top margin offset of Div. the algorithm of margin offset is to subtract the width of the div from the width of the page window, and then divide the obtained value by 2, that is, the left offset. The algorithm of right offset is the same. Note that the css setting of div should be completed in the resize () method, that is, the css setting of div should be executed every time the window size is changed. The code is as follows:

   $(function(){
          $(window).resize(function(){
            $('.mydiv').css({
              position:'absolute',
              left:($(window).width()-$('.mydiv').outerWidth())/2,
              top:($(window).height()-$('.mydiv').outerHeight())/2
            });
          });
      })

The advantage of this method is that you don't need to know the specific width and height of div. you can realize horizontal and vertical centering directly with jquery, and it is compatible with various browsers. This method is used in many pop-up layer effects.

Flex centering with flex layout

You don't need to know the width and height of the element and the attributes of the element to use flex centering.

.way7 {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;/*horizontally*/
    align-items: center;/*Vertical center*/
}

Use display: table cell; Center

Use display: table cell, vertical align and text align in combination to center all elements in the parent element horizontally and vertically (set display: inline block for internal div). This is especially useful when the width, height and quantity of child elements are uncertain!

.way8 {
    display: table-cell;
    width: 250px;
    height: 250px;
    text-align: center;
    vertical-align: middle;
    float: none;
}

.way8 img {
    display: inline-block;
}

Special reminder:

• 1. Table cell is not aware of margin. Setting attributes such as table row on the parent element will also make it not aware of height.

• 2. Setting float or position will destroy the default layout. You can consider adding a parent div to it and defining attributes such as float.