CSS style centered summary

 CSS style centered summary

First, when determining the width of the parent container is centered horizontally

(1) margin: 0 auto; text-align: center achieve CSS centered horizontally.

  This method is most commonly used to achieve CSS horizontally centered, and I probably have 60 percent of the CSS is centered horizontally in the front-end development through the "margin: 0 auto; text-align: center" to achieve.

(2) through the display: flex implement CSS centered horizontally.

  As more and more compatible flexbox, so by "display: flex" to achieve the level of CSS centered programs are increasingly popular. By display: flex implement the principle of CSS level centered is the parent element display: flex; flex-direction: column; and the child elements align-self: center; this with the principles of CSS vertical centering is the same, but there are on flex-direction the difference is a row (the default), the other is a column.

(3) display: table-cell and margin-left CSS implemented centered horizontally.

  For the case where the width of the parent element and the child elements are determined by suitable display: the middle level achieved CSS table-cell and margin-left. In use, the parent element display: table-cell, sub-element to the remaining half of the width of the margin-left.

(4) by position: absolute CSS realize centered horizontally.

  This method is suitable for a method to keep the same scene, it is also suitable width where the parent and child elements are determined. In use, the parent element position: absolute, the remaining subelements to half the width margin-left.

(5) by width: fit-content to achieve CSS centered horizontally.

  This method ensures that the case of the width of a child element of uncertainty, but also to achieve CSS centered horizontally. It should be noted that the need to meet "margin: 0 auto; text-align: center" use.

Second, the width of the container when the level of uncertainty centered parent

(1) position: relative: left: 50%; transform: translateX (-50%); - webkit-transform: translateX (-50%); - moz-transform: translateX (-50%); 50 // here % means 50% of the box itself;

（2） width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;

Third, the horizontal and vertical center

(A) from the document flow element

1, margin: auto method

CSS code:

div{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

HTML code:

<div>
   <img src="prince.png">
</div>

(2) Negative margin method

CSS code:

.container{
      width: 500px;
      height: 400px;
      border: 2px solid #379;
      position: relative;
 }
 .inner{
      width: 480px;
      height: 380px;
      background-color: #746;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -190px; /*height的一半*/
      margin-left: -240px; /*width的一半*/
 }

HTML code: 

<div class="container">
    <div class="inner"></div>
</div>

 (2) failing to flow out of the middle element of the document

 （1）table-cell法

div{
    border: 3px solid #555;
    width: 300px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
span{
    vertical-align: middle;
}

HTML code:

<div>
    <span>这是放在span中的文字，通过外层div设置display: table-cell以及vertical-align: middle实现垂直居中。</span>
</div>

(2) an elastic box method

CSS code:

.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

HTML code:

<div class="container">
    <div class="inner">
        我在容器中水平垂直居中
    </div>
</div>