How to achieve CSS centering? ?Common methods for CSS centering_html/css_WEB-ITnose

Source: http://www.ido321.com/824.html

1. Horizontal centering

1. Centering of inline elements: relative to parent Block-level elements are centered and aligned

   1: .center-children {

   2:   text-align: center;

   3: }

2. Block-level elements are centered: set margin-left and Set margin-right to auto to center it (width must also be set, otherwise it will fill the entire container and the centering effect cannot be seen)

   1: .center-me {

   2:   margin: 0 auto;

   3: }

If there are many block-level elements that need to be centered horizontally in a row, it is best to use a different display type. Here is an example using inline-block and flex.

Demo address: http://jsfiddle.net/Web_Code/5fvrwwk1/embedded/result/

   1: <main class="inline-block-center">

   2:   <div>

   3:     I'm an element that is block-like with my siblings and we're centered in a row.

   4:   </div>

   5:   <div>

   6:     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

   7:   </div>

   8:   <div>

   9:     I'm an element that is block-like with my siblings and we're centered in a row.

  10:   </div>

  11: </main>

  12: <main class="flex-center">

  13:   <div>

  14:     I'm an element that is block-like with my siblings and we're centered in a row.

  15:   </div>

  16:   <div>

  17:     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

  18:   </div>

  19:   <div>

  20:     I'm an element that is block-like with my siblings and we're centered in a row.

  21:   </div>

  22: </main>

css:

   1: body {

   2:   background: #f06d06;

   3:   font-size: 80%;

   4: }

   5: main {

   6:   background: white;

   7:   margin: 20px 0;

   8:   padding: 10px;

   9: }

  10: main div {

  11:   background: black;

  12:   color: white;

  13:   padding: 15px;

  14:   max-width: 125px;

  15:   margin: 5px;

  16: }

  17: .inline-block-center {

  18:   text-align: center;

  19: }

  20: .inline-block-center div {

  21:   display: inline-block;

  22:   text-align: left;

  23: }

  24: .flex-center {

  25:   display: flex;

  26:   justify-content: center;

  27: }

2. Vertical centering

1. Inline elements: Set equal upper and lower padding, or use line-height

   1: .link {

   2:   padding-top: 30px;

   3:   padding-bottom: 30px;

   4: }

When the text will not wrap, you can use line-height to align the text by making it equal to height.

   1: .center-text-trick {

   2:   height: 100px;

   3:   line-height: 100px;

   4:   white-space: nowrap;

   5: }

Multi-line text can also use upper and lower padding You can also center multiple lines, but if this method doesn't work, you can make the containers of these words display in table cell mode, and then set the vertical-align attribute of the text to align,

Demo address: http:/ /jsfiddle.net/Web_Code/5fvrwwk1/1/embedded/result/

html:

   1: <table>

   2:   <tr>

   3:     <td>

   4:       I'm vertically centered multiple lines of text in a real table cell.

   5:     </td>

   6:   </tr>

   7: </table>

   8: <div class="center-table">

   9:   <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>

  10: </div>

css

   1: body {

   2:   background: #f06d06;

   3:   font-size: 80%;

   4: }

   5: table {

   6:   background: white;

   7:   width: 240px;

   8:   border-collapse: separate;

   9:   margin: 20px;

  10:   height: 250px;

  11: }

  12: table td {

  13:   background: black;

  14:   color: white;

  15:   padding: 20px;

  16:   border: 10px solid white;

  17:   /* default is vertical-align: middle; */

  18: }

  19: .center-table {

  20:   display: table;

  21:   height: 250px;

  22:   background: white;

  23:   width: 240px;

2. Block-level elements

  24:   margin: 20px;

  25: }

If the element has a fixed height, it can be vertically centered like this

  26: .center-table p {

  27:   display: table-cell;

  28:   margin: 0;

  29:   background: black;

  30:   color: white;

  31:   padding: 20px;

  32:   border: 10px solid white;

  33:   vertical-align: middle;

  34: }

If you don’t know the element height, then like this

   1: .parent {

   2:   position: relative;

   3: }

   4: .child {

   5:   position: absolute;

   6:   top: 50%;

   7:   height: 100px;

   8:   margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */

   9: }

You can also use flexbox

   1: .parent {

   2:   position: relative;

   3: }

   4: .child {

   5:   position: absolute;

   6:   top: 50%;

   7:   transform: translateY(-50%);

   8: }

   1: <main>  

   2:   <div>

   3:      I'm a block-level element with an unknown height, centered vertically within my parent.

   4:   </div>  

   5: </main>

   1: body {

   2:   background: #f06d06;

   3:   font-size: 80%;

   4: }

   5: main {

   6:   background: white;

   7:   height: 300px;

   8:   width: 200px;

   9:   padding: 20px;

  10:   margin: 20px;

  11:   display: flex;

  12:   flex-direction: column;

3. Center horizontally and vertically at the same time

  13:   justify-content: center;

  14:   resize: vertical;

1. The element has a fixed height and width: first center it absolutely, then move it up and to the left by 50% of the width

  15:   overflow: auto;

  16: }

  17: main div {

  18:   background: black;

  19:   color: white;

  20:   padding: 20px;

  21:   resize: vertical;

  22:   overflow: auto;

  23: }

   1: //这种方案有极好的跨浏览器支持。

   2: .parent {

2. The height and width of the element are unknown or variable of: Translate negative 50% in both directions using the transofrm attribute