CSS3 implementation of horizontal center, vertical center, horizontal vertical center instance code

Time:2020-6-27

As a front-end monkey, we will encounter the effect of “using CSS to center” more or less, no matter when we are interviewing or working. Today, I will write an article about several methods of CSS vertical and horizontal center.

Chestnut 1: start with the simplest horizontal center

margin: 0 auto;

Block level elements use margin: 0 Auto; to center in the middle of the parent element, but remember to set the width and height of the block level element. HTML section


<div class="wrap">
  <div class="example1">
    <p>CSS</p>
  </div>
</div>

CSS section


.example1 {
  width: 200px;
  height: 200px;
  background-color: orange;
}
.example1 p {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
  line-height: 100px;
  text-align: center;
}

 

Chestnut 2: element horizontal and vertical center

Position element known width absolute positioning + margin reverse offset


.wrap { position: relative; background-color: orange; width: 300px; height: 300px; } .example2 { background-color: red; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; } 

Position transform element unknown width if the element unknown width, just replace the margin: – 50px 0 0 – 50px; in example2 above with: Transform: translate (- 50%, – 50%);

 

Chestnut 3: Flex layout

HTML same as above, with CSS code attached

.warp {
  background-color: #FF8C00;
  width: 200px;
  height: 200px;
  display: flex;
  Justify content: Center; / * center sub items horizontally*/
  Align items: Center; / * center sub items vertically*/
}
.example3 {
  background-color: #F00;
  width: 100px;
  height: 100px;
}

 

The other is table cell layout, which I won’t introduce because I don’t want to introduce.

Chestnut 4: absolute layout

Div using absolute layout, setting margin:auto; And set the values of top, left, right and bottom to be equal, not all of them must be 0. HTML section

<div class="warp">
  <div class="example3">
    Center display
  </div>
</div>

CSS section


.warp {
  position: relative;
  background-color: orange;
  width: 200px;
  height: 200px;
}
.example3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  width: 100px;
  height: 100px;
  margin: auto;
}

 

Chestnut 5: relative positioning of sub elements, vertical center obtained through translay()


.warp {
  position: relative;
  background-color: orange;
  width: 200px;
  height: 200px;
}
.example3 {
  position: relative;
  top:50%;
  transform:translateY(-50%);
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

 

Chestnut 6: use vertical align: middle of inline block to align after pseudo elements

Vertical using inline block- align:middle The effect of alignment after pseudo elements is better. The size of the middle block can be used for wrapping and adaptive content, and the compatibility is quite good. The disadvantage is that the horizontal center needs to consider the blank space in the inline block interval


.warp {
    text-align: center;
    overflow: auto;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.example3 {
    display: inline-block;
    background-color: red;
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

.warp:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.25em;
    /* To offset spacing. May vary by font */
}

Chestnut 7: display: Flex box

Flexbox layout. This is the ultimate method of layout, specializing in all kinds of layout positioning problems! Advantages: it can solve all kinds of layout problems


.warp {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: orange;
}
 
.example3 {
  width: 100px;
  height: 100px;
  background-color: red;
}

 

Chestnut 1 in the middle of the picture:


<div class="warp">
  <div class="example3">
    <img src="xxxx" alt="">
  </div>
</div>
.warp {
  width: 200px;
  height: 200px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}
.example3 img {
  width: 100px;
  height: 100px;
  background-color: blue;
}

 

summary

This article introduces the example code of CSS3 to realize horizontal center, vertical center and horizontal vertical center. For more information about CSS3 vertical center, please search the previous articles of developepaer or continue to browse the following articles. I hope you can support developepaer in the future!