当前位置：网站首页>Two tips for block level elements

Two tips for block level elements

2022-06-28 08:13:00 【Mediocrity and laziness】

The middle of block level elements

Before writing in the middle, it is usually margin:atuto Or an elastic box , I have to say that the elastic box is really easy to use . But today, I will record the other two centering methods .

The first one is

We all know that one way to center elements is to set the positioning left:50% then transform:translateX(-50%), This method is also commonly used . But today's centring method is a little different from this, but it is simpler .

<style>
    .big{
      width: 300px;
      height: 300px;
      border: 1px solid red;
      position: relative;
      margin: auto;
    }
    .small{
      width: 100px;
      height: 100px;
      background-color: deeppink;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="small"></div>
  </div>

The renderings are as follows ：
Insert picture description here
You can see that the center of my big box is used margin:auto, So is the little box margin:auto, So why is one centered on the left and right, and the other centered on the top, bottom, left and right .
The reason is that margin:auto The principle of centring , because margin:auto Is based on the flow of elements , In the example above, the big box is a standard block level element , So his width is 100% by default .
Although the big box looks only as wide as I set it , But his stream still defaults to 100% , So I set margin:auto Then it will be centered .
The same goes for small boxes , After positioning, I gave up, down, left and right 0, This will stretch the flow of the small box to the size of the large box , At this time, I set the small box margin:auto The small box will be centered around the large box .

The second kind

The second method actually uses elastic boxes , But it is more direct than setting the center of the main shaft and the secondary shaft .
The code is as follows ：

 <style>
    .big{
      width: 300px;
      height: 300px;
      border: 1px solid red;
      display: flex;
      margin: auto;
    }
    .small{
      width: 100px;
      height: 100px;
      background-color: deeppink;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="small"></div>
  </div>

The renderings here are the same as those above, so I won't make a demonstration , Let me just say the reason here .
When an element is set with an elastic box, its child elements automatically become block level elements , The secondary axis of the element is stretched , So the effect is the same as the above .

原网站

版权声明
本文为[Mediocrity and laziness]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206280806203473.html