Implementation of the element center problem in Css, And the css element center implementation

Implementation of the element center problem in Css, And the css element center implementation

Preface:

It is very easy to vertically center elements in a fixed height container when writing CSS, such as setting the padding of the container or the margin of the elements; let the elements in the container also have text-align: center, margin: 0 auto; and other attributes to help us achieve our goal, but how can we center elements vertically in containers with uncertain heights or text with uncertain lines in vertical centers in containers with fixed heights? Next we will discuss several ways to vertically center elements:

 

1. Vertical center of Text

1. Single Line Text

Line-height and height are the same, so you can center a single line of text vertically.

2. Multi-Line Text

We can process multi-line text as an image, encapsulate the text with span, and set the same display attribute (inline-block) as the image ), then, you can vertically center multiple lines of text by processing the vertical center of the image.

<div class="wrap">    <span class="content">        content<br>        content    </span></div>

 1 .wrap { 2     width: 200px; 3     height: 200px; 4     line-height: 200px; 5     background-color: #36AF77; 6 } 7 .content { 8     display: inline-block; 9     vertical-align: middle;10     line-height: 15px;11     font-size: 14px;12 }

Running result:

 

2. Vertical center of the image

1. vertical-align and line-height are used to realize vertical center.

<div class="wrap">    </div>

 1 .wrap { 2     width: 200px; 3     height: 200px; 4     line-height: 200px; 5     font-size: 0; 6     background-color: #36AF77; 7 } 8 img { 9     vertical-align: middle;10 }

Running result:

2. Vertical center through a span of 100%

<div class="wrap">    <span></span></div

 1 .wrap { 2     width: 200px; 3     height: 200px; 4     background-color: #36AF77; 5 } 6 img { 7     vertical-align: middle; 8 } 9 span {10     display:inline-block;11     height: 100%;12     vertical-align: middle;13 }

Running result:

Here, the img shares the same line with a span of height: 100%, so that the row height is full of div.

3. Background Image Locating Method

<div class="wrap"></div>

1 .wrap {2     width: 200px;3     height: 200px;4     background-color: #36AF77;5     background-image: url("E:/picture/me.jpg");6     background-position: center;7     background-size: 60%;8     background-repeat: no-repeat;9 }

The image is used as the background of the container and centered by the background-position attribute.

4. Vertical center using table-cell

<div class="wrap">    </div>

1 .wrap {2     width: 200px;3     height: 200px;4     background-color: #36AF77;5     display: table-cell;6     font-size: 0;7     vertical-align: middle;8 }

Running result:

 

Definition of vertical-align on W3C: vertical-align attribute sets the vertical alignment of elements.

This attribute defines the vertical alignment between the baseline of an element in a row and the baseline of the row where the element is located. The negative length value and percentage value can be specified. This reduces the number of elements rather than increases.

In table cells, this attribute sets the cell content alignment in the cell box.

5. Vertical center using flex flexible Layout

<div class="wrap">    </div>

 1 img { 2     width: 88px; 3     height: 88px; 4 } 5 .wrap { 6     width: 200px; 7     height: 200px; 8     background-color: #36AF77; 9     display: flex;10     justify-content: center;11     align-items: center;12 }

Running result:

Unfortunately, IE10 versions earlier than 10 are not supported.

6. Use the after pseudo-class

<div class="wrap">    </div>

 1 img { 2     width: 88px; 3     height: 88px; 4 } 5 .wrap { 6     width: 200px; 7     height: 200px; 8     background-color: #36AF77; 9 }10 .wrap:after {11     content: "";12     display: inline-block;13     height: 100%;14     vertical-align: middle;15 }16 img {17     vertical-align: middle;18 }

Running result:

This method is similar to the second method. It only replaces the span element with the elements generated by the after pseudo-class.

7. Use additional block-level elements when the image height is known

<div class="wrap">    <div class="temp"></div>    </div

 1 img { 2     width: 88px; 3     height: 88px; 4 } 5 .wrap { 6     width: 200px; 7     height: 200px; 8     background-color: #36AF77; 9 }10 .temp {11     height: 50%;12     margin-bottom: -44px;13     opacity:0;14 }

Running result:

Opacity: 0 // transparent but not displayed but placeholder

8. Use the margin-top negative margin when the image height is known

<div class="wrap">    </div>

 1 img { 2     width: 88px; 3     height: 88px; 4 } 5 .wrap { 6     position: relative; 7     width: 200px; 8     height: 200px; 9     background-color: #36AF77;10 }11 img {12     position:absolute;13     top: 50%;14     left:0;15     right:0;16     margin:auto;17     margin-top: -44px;18 }

Running result:

9. Absolute Positioning

<div class="wrap">    </div>

 1 .wrap { 2     position: relative; 3     width: 200px; 4     height: 200px; 5     background-color: #36AF77; 6 } 7 img { 8     position:absolute; 9     top:0;10     bottom:0;11     left:0;12     right:0;13     margin:auto;14 }

Running result:

10. Final debut of the main character-omnipotent center mode (absolute positioning plus transform)

<div class="wrap">    </div><div class="wrap">    </div><div class="wrap">    </div>

 1 .center { 2     left: 50%; 3     top: 50%; 4     position: absolute; 5     -webkit-transform: translate3D(-50%,-50%,0); 6     -ms-transform: translate3D(-50%,-50%,0); 7     -moz-transform: translate3D(-50%,-50%,0); 8     -o-transform: translate3D(-50%,-50%,0); 9     transform: translate3D(-50%,-50%,0);10     z-index: 100;11 }12 .vertical-center {13     top: 50%;14     position: absolute;15     -webkit-transform: translateY(-50%);16     -ms-transform: translateY(-50%);17     -moz-transform: translateY(-50%);18     -o-transform: translateY(-50%);19     transform: translateY(-50%);20     z-index: 100;21 }22 .horizon-center {23     left: 50%;24     position: absolute;25     -webkit-transform: translateX(-50%);26     -ms-transform: translateX(-50%);27     -moz-transform: translateX(-50%);28     -o-transform: translateX(-50%);29     transform: translateX(-50%);30     z-index: 100;31 }32 .wrap {33     position: relative;34     width: 200px;35     height: 200px;36     margin-bottom: 10px;37     background-color: #36AF77;38 }

Running result:

Center display is achieved by absolute positioning to the position of 50%, and then converting the negative distance of its height to the width of 50%.

However, the omnipotent method is not omnipotent. transform is not supported in IE9 and below.

 

For horizontally centered text, you can use text-align: center, and block-level elements can be implemented using margin: 0 auto;. This is easy to say.

I briefly introduced the method of centering 10 kinds of images. Do you have any feelings? Mom no longer needs to worry that I will not center the elements.

 

Above