How to achieve CSS centering? ?Common methods for CSS centering_html/css

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 {

Copy after login

   2:   text-align: center;

Copy after login

   3: }

Copy after login

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 {

Copy after login

   2:   margin: 0 auto;

Copy after login

   3: }

Copy after login

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">

Copy after login

   2:   <div>

Copy after login

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

Copy after login

   4:   </div>

Copy after login

   5:   <div>

Copy after login

   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.

Copy after login

   7:   </div>

Copy after login

   8:   <div>

Copy after login

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

Copy after login

  10:   </div>

Copy after login

  11: </main>

Copy after login

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

Copy after login

  13:   <div>

Copy after login

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

Copy after login

  15:   </div>

Copy after login

  16:   <div>

Copy after login

  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.

Copy after login

  18:   </div>

Copy after login

  19:   <div>

Copy after login

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

Copy after login

  21:   </div>

Copy after login

  22: </main>

Copy after login

css:

   1: body {

Copy after login

   2:   background: #f06d06;

Copy after login

   3:   font-size: 80%;

Copy after login

   4: }

Copy after login

   5: main {

Copy after login

   6:   background: white;

Copy after login

   7:   margin: 20px 0;

Copy after login

   8:   padding: 10px;

Copy after login

   9: }

Copy after login

  10: main div {

Copy after login

  11:   background: black;

Copy after login

  12:   color: white;

Copy after login

  13:   padding: 15px;

Copy after login

  14:   max-width: 125px;

Copy after login

  15:   margin: 5px;

Copy after login

  16: }

Copy after login

  17: .inline-block-center {

Copy after login

  18:   text-align: center;

Copy after login

  19: }

Copy after login

  20: .inline-block-center div {

Copy after login

  21:   display: inline-block;

Copy after login

  22:   text-align: left;

Copy after login

  23: }

Copy after login

  24: .flex-center {

Copy after login

  25:   display: flex;

Copy after login

  26:   justify-content: center;

Copy after login

  27: }

Copy after login

2. Vertical centering

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

   1: .link {

Copy after login

   2:   padding-top: 30px;

Copy after login

   3:   padding-bottom: 30px;

Copy after login

   4: }

Copy after login

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 {

Copy after login

   2:   height: 100px;

Copy after login

   3:   line-height: 100px;

Copy after login

   4:   white-space: nowrap;

Copy after login

   5: }

Copy after login

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>

Copy after login

   2:   <tr>

Copy after login

   3:     <td>

Copy after login

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

Copy after login

   5:     </td>

Copy after login

   6:   </tr>

Copy after login

   7: </table>

Copy after login

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

Copy after login

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

Copy after login

  10: </div>

Copy after login

css

   1: body {

Copy after login

   2:   background: #f06d06;

Copy after login

   3:   font-size: 80%;

Copy after login

   4: }

Copy after login

   5: table {

Copy after login

   6:   background: white;

Copy after login

   7:   width: 240px;

Copy after login

   8:   border-collapse: separate;

Copy after login

   9:   margin: 20px;

Copy after login

  10:   height: 250px;

Copy after login

  11: }

Copy after login

  12: table td {

Copy after login

  13:   background: black;

Copy after login

  14:   color: white;

Copy after login

  15:   padding: 20px;

Copy after login

  16:   border: 10px solid white;

Copy after login

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

Copy after login

  18: }

Copy after login

  19: .center-table {

Copy after login

  20:   display: table;

Copy after login

  21:   height: 250px;

Copy after login

  22:   background: white;

Copy after login

  23:   width: 240px;

Copy after login

2. Block-level elements

  24:   margin: 20px;

Copy after login

  25: }

Copy after login

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

  26: .center-table p {

Copy after login

  27:   display: table-cell;

Copy after login

  28:   margin: 0;

Copy after login

  29:   background: black;

Copy after login

  30:   color: white;

Copy after login

  31:   padding: 20px;

Copy after login

  32:   border: 10px solid white;

Copy after login

  33:   vertical-align: middle;

Copy after login

  34: }

Copy after login

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

   1: .parent {

Copy after login

   2:   position: relative;

Copy after login

   3: }

Copy after login

   4: .child {

Copy after login

   5:   position: absolute;

Copy after login

   6:   top: 50%;

Copy after login

   7:   height: 100px;

Copy after login

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

Copy after login

   9: }

Copy after login

You can also use flexbox

   1: .parent {

Copy after login

   2:   position: relative;

Copy after login

   3: }

Copy after login

   4: .child {

Copy after login

   5:   position: absolute;

Copy after login

   6:   top: 50%;

Copy after login

   7:   transform: translateY(-50%);

Copy after login

   8: }

Copy after login

   1: <main>

Copy after login

   2:   <div>

Copy after login

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

Copy after login

   4:   </div>

Copy after login

   5: </main>

Copy after login

   1: body {

Copy after login

   2:   background: #f06d06;

Copy after login

   3:   font-size: 80%;

Copy after login

   4: }

Copy after login

   5: main {

Copy after login

   6:   background: white;

Copy after login

   7:   height: 300px;

Copy after login

   8:   width: 200px;

Copy after login

   9:   padding: 20px;

Copy after login

  10:   margin: 20px;

Copy after login

  11:   display: flex;

Copy after login

  12:   flex-direction: column;

Copy after login

3. Center horizontally and vertically at the same time

  13:   justify-content: center;

Copy after login

  14:   resize: vertical;

Copy after login

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;

Copy after login

  16: }

Copy after login

  17: main div {

Copy after login

  18:   background: black;

Copy after login

  19:   color: white;

Copy after login

  20:   padding: 20px;

Copy after login

  21:   resize: vertical;

Copy after login

  22:   overflow: auto;

Copy after login

  23: }

Copy after login

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

Copy after login

   2: .parent {

Copy after login

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

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