Detailed code explanation of how to implement various centered filling methods using css attributes

First is horizontal centering. The simplest way is of course

margin:0 auto;

that is, to set the margin-left and margin-right attributes Set to auto to achieve a horizontally centered effect.

What about other ways?

line-height

First introduce the horizontal centering method of text:

<p class="wrap">刘放</p>

Use line-height to be the same as height:

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
   height: 200px;
  font-size: 36px;
  background-color: #ccc;
}

The effect As follows:

padding filling

Use padding and background-clip to achieve the horizontal and vertical centering of p:

<p class="parent">  
<p class="children">
</p>
</p>

Set the backgroun-clip to content-box, crop the background to the outer edge of the content area, and then use padding to set it to half of the difference between the outer p minus the inner p:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

The effect is as follows:

margin filling

Next, we will introduce the method of margin filling to achieve horizontal and vertical centering.
First we define the parent and child p:

<p class="parent">
  <p class="children"></p>
</p>

Here we set the margin-top of the child p to the height of the parent p minus half the height of the child p, and then set the overflow to hidden to trigger the parent The BFC and LESS code of p is as follows:

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

The final centering effect is as follows:

absolute positioning

Use position:absolute with top, left 50%, and then set margin to a negative value to center p horizontally and vertically. First, you still need to define the parent and child p:

<p class="parent">
  <p class="children"></p>
</p>

and then set the corresponding css:

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

The value in margin is half of the width of p. The final rendering is:

text-align is centered

As we all know, text-align can center the content in a p horizontally. But what if you want to center the sub-p in this p? You can set the display of sub-p to inline-block.

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

flex centering

Finally, let’s introduce the horizontal and vertical centering method implemented by display:flex in CSS3.

<p class="parent">
  <p class="children">我是通过flex的水平垂直居中噢！</p>
</p>

The effect is as follows:

The above is the detailed content of Detailed code explanation of how to implement various centered filling methods using css attributes. For more information, please follow other related articles on the PHP Chinese website!