Have you learned all 23 vertical centering techniques of CSS?

Web CSS has not stopped the vertical center of demand, and its difficulty also has not let a person easily, after the development martyrs of each vertical center of CSS skills is said to have reached nearly 10, but little is known, the vertical center part of the company and even the CSS skills as interview questions, its importance is obvious.

In constant exploration and discovery, THERE are 23 vertical centralization ways of CSS. You can see which ones you are familiar with.

1, Line-height application situation: single Line of text vertical center technique

This method is probably the most familiar, and is common in single-line applications, such as buttons for objects, or drop-down boxes, navigation, and other elements. The principle of this method is that after setting the line height of a single line of text, the text will be located in the middle of the vertical line height. Using this principle, the demand for vertical center can be easily achieved.

<div class="content"</div>Copy the code

.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}
Copy the code

2, line-height + inline-block

Application scenario: multi-object vertical center technique

If you can center row elements vertically in the first way, there’s no reason why you can’t do multiple rows, but you need to treat multiple elements or rows as one row element, so you have to wrap the data in a layer and set it to inline-block. Use inline-block instead of height on the outer layer of the inline-block object, so that you can center your data vertically, including the title and content.

<h2>line-height + inline-block</h2>
<div class="box box2">
  <div class="content"><a href="http://www.cssfan.cn"</a></div>Copy the code

.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;} front-end learning exchange group: 731771211 novice, advanced - resource sharing, let the dream illuminate the realityCopy the code

3, :before + inline-block applies to scenarios: multi-object CSS vertical center technique

The “before” element with the inline-block attribute is a traditional vertical center technique. The advantage of this method is that the child element does not need to be centered at a specific height. We will use the “before” element with the inline-block attribute at 100% height. Vertical-align :middle is a great vertical center solution in the past. If you set the child element to inline-block, you can use vertical-align:middle. Only the 4-5px space between inline-block elements needs to be dealt with specifically, but it’s useful.

<h2>3.:before + inline-block</h2>
<div class="box box3">
  <div class="content">http://www.cssfan.cn</div>
</div>
Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:' ';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}
Copy the code

4. Absolute + margin

Application situation: vertical center technique for multi-line text

Who says absolute positioning should be used less? Amos believes that there is no problem with using too much and too little. The key is whether you use it properly. Absolute positioning in this example would set top:50% to capture 50% of the height of the space, and then set margin-top to negative half of the height of the center element to center the element. This method is spread since ancient times for many years in the center?

4. Absolute + margin negative </h2> <div class="box box4">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}
Copy the code

5. Absolute + Margin Auto

This method is a bit more special. When the element is set to absolute positioning, it is assumed that it cannot capture the overall usable space, so margin: Auto will not work, but when you set top:0; bottom:0; Margin: Auto works. If your margin element needs to be horizontally centered in the parent layer, you can also set left:0. right:0; To allow the absolute positioning element to obtain the scope of the space, and let marign-left and margin-right set to auto can be centered. The downside of this approach is that your positioning element must have a fixed width and height (percentage count) for it to be properly centered.

<h2>5.absolute + translate(-50%, -50%)</h2>
<div class="box box5">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
Copy the code

Vertical center technique for multiple lines of text

In an absolute positioning mode, this mode should be the most convenient, because this positioning element does not need a fixed width and height, we use the absolute positioning of top and right to set the top and left elements to 50% each. Translate 50% of the width and height of the center element to the center. (CSS3 is awesome)

<h2>6.absolute + margin: auto</h2>
<div class="box box6">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box5 .content{
  width: 400px;
  background: #ccc;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

7, Flex + align-items

Flex! It continuously since its test web developer’s conscience, what do you want to abandon float hug flex, I think the answer is everyone free a ruler in the heart, but the first touch the flex again touch float is first after bitter sweet, this pour order want to eat sugar cane is still eat sugar cane is really hard to say, since a flex, kid test a percentage, Design web pages do not run version, client web pages are RWD, the boss is very happy to make money, I also pay (overtime) good willing, can not help but say Flex is really a god, We just need to set the parent layer display:flex and set the cross axis property align-items:center. The advantage of this method is that the layer does not need to set the height, and the original code is very clean. It’s really gonna take you to heaven.

<h2>7.Flex + align-items</h2>
<div class="box box7">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}
Copy the code

8. Flex + : Before + Flex-grow

Flex allows you to center data in a variety of ways. This is done using the Flex grow extension feature. In this example, Amos uses flex-direction:column, with: Before. Setting it to half of the remaining space will enable the content data to be accurately pushed into the vertical middle, an extension of the traditional technique. Isn’t the seventh way faster?

<h2>8.Flex + before + flex-grow</h2>
<div class="box box8">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box:before{
  content: ' ';
  flex-grow: .5;
}
.content{
  width: 400px;
  background: #ccc;
}
Copy the code

Flex + margin

Application situation: vertical center technique for multi-line text

Flex continues to be used for centering. Due to the particularity of Flex elements in interpreting space, we only need to set display: Flex on the parent element, and then set margin: Auto on the element that needs to be centered vertically to automatically center

<h2>9.Flex + margin</h2>
<div class="box box9">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
}
.content{
  width: 400px;
  background: #ccc;margin: auto; } front-end learning exchange group: 731771211 novice, advanced - resource sharing, let the dream illuminate the realityCopy the code

10. Flex + align-self

Align-self align-self: Center align-self align-self: Center align-self: Center align-self: Center align-self: Center align-self: Center

<h2>10.Flex + align-self</h2>
<div class="box box10">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center
}
Copy the code

Flex + align-content 11, Flex + align-content

Under normal circumstances, align-content can only be used to center a sub-row flex item, but this technique can be used when I am not sure how many sub-elements there are, and sometimes there may be a single sub-element (of course you can have other solutions). Since it is a multi-row sub-element, Let’s add two more siblings to a single child, using :before and :after to multiply the child elements and center them using flex’s align-content property

 <h2>11.Flex + align-content</h2>
<div class="box box11">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
.box11:before,
.box11:after{
  content: ' ';
  display: block;
  width:100%;
}
Copy the code

Grid + Template

Application situation: vertical center technique for multi-line text

One of the most surprising things about the CSS Grid is the ability to use the template as a canvas. All you need to do is set the template to three columns and you can center it vertically

<h2>12.Grid + template</h2>
<div class="box box12">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    '... '
    '. amos .'
    '... ';
}
.content{
  width: 400px;
  background: #ccc;
  grid-area: amos;
}
Copy the code

13, Grid + align-items applicable situation: multi-line text vertical center technique

Align-items are not only available in Flex, but also in CSS Grid. In Flex, align-items are aligned for cross axis, while in CSS Grid, align-items are aligned for Y axis. You can think of it as the vertical-align property of a table that stores cells

<h2>13.Grid + align-items</h2>
<div class="box box13">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}
Copy the code

14, Grid + align-content applicable situation: Du Hang’s vertical centering skills

CSS Grid align-content is a little different from Flex align-content. CSS Grid interprets space differently from Flex, so align-content only works on multi-line elements in Flex. We don’t have this problem in the Grid, so we can happily use align-content to center child elements vertically without any effort

<h2>14.Grid + align-content</h2>
<div class="box box14">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-content: center; 
}
.content{
  width: 400px;
  background: #ccc;
}
Copy the code

15, Grid + align-self application scenario: multi-line text vertical center technique

Align-self align-self align-self align-self align-self align-self align-self align-self align-self: Center Align-self align-self: Center align-self align-self: Center align-self align-self: Center

<h2>15.Grid + align-self</h2>
<div class="box box15">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center;
}
Copy the code

<h2>16.Grid + place-items</h2>
<div class="box box16">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-items: center;
}
.content{
  width: 400px;
  background: #ccc;
}
Copy the code

17. Grid + place-content: Vertical center technique for multi-line text

Place-content, how many of you have used this property, it’s short for align-content and context-content, which is simply horizontal and vertical alignment, and of course you can center it with center

<h2>17.Grid + place-content</h2>
<div class="box box17">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
Copy the code

18, Grid + margin suitable situation: multi-line text vertical center technique

Grid continues to be used for centering. Due to the particularity of Grid element in interpreting space, we only need to set display: Grid on the parent element, and then set margin: Auto on the element that needs vertical centering to automatically center. That description sounds familiar.

<h2>18.Grid + margin</h2>
<div class="box box18">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
}
.content{
  width: 400px;
  background: #ccc;
  margin:auto;
}
Copy the code

19. Display: table-cell Application scenario: vertical center technique of multi-line text

The idea behind this is to use the CSS display property to set divs as cells in a table, so you can center information vertically using the vertical-align property that supports cell alignment

<h2>19.display: table-cell</h2>
<div class="box box19">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
    text-align: center;
    display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}
Copy the code

20. Calc: Vertical centering technique of multi-line text

Cale is short for Calculator, and this CSS method developed by Microsoft is really a boon for web developers. We can do it directly in your web page, it’s too hard, from now on we don’t have to rack one’s brains over there of mathematical calculation, or to find a way to use js to dynamic calculation, we can easily use calc () this method, the percentage to timely and dynamically calculate what is the actual height, is really is a landmark of a method, However, this method needs to be noted that a large number of use, webpage performance will be relatively poor, so please use with caution.

<h2>20.calc</h2>
<div class="box box20">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top:calc((100% - 70px) / 2);
  margin:auto;
  height: 70px;
}
Copy the code

Use situation: Vertical center technique for multi-line text

The trick is to use the top:50% move to create a fixed percentage of distance above your element, and then have the element itself use the tanslateY percentage for vertical centring. Translate is a nice attribute, Since the percentage unit of Translate uses the element’s own size as 100%, it makes it much easier to use the element’s own width and height.

<h2>21.relative + translateY(-50%)</h2>
<div class="box box21">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}
Copy the code

22. Padding: Vertical centering technique for multiple lines of text

What! It’s a vertical center technique, and even my grandmother knows it

Right, this is indeed a vertical in the way, the way that was simply too much, so much so that some developers think that this approach can be regarded as a kind of vertical centered skill, but also you can’t argue that my data is vertical center, well, when I hard concave, you’re right, all right

<h2>22.padding</h2>
<div class="box box22">
  <div class="content"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}
Copy the code

23. Write-mode: Vertical drama technique with multiple lines of text

The idea was inspired by my friend Paul. Write-mode is basically a completely different CSS property from vertical center. It changes the orientation of text from horizontal to vertical, and has been supported since early IE5. However, Amos was seldom used at that time. Firstly, there were many horizontal pages on the web, and other browsers except IE were not well supported at that time, so it was seldom used.

Use write-mode to turn an entire text container into a straight text. Then use text-align:center to center the container vertically. It’s that simple. However, it is important to note that the syntax is supported by the browser, and it needs to be broken down. Otherwise, some browsers have different syntax, which may make your page look invalid on some browsers. This is the most important thing to note

<h2>23. Writing-mode </h2> Amos actually completed <div class="box box23">
  <div class="content">
    <div class="txt"</div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;margin: auto; writing-mode: tb-lr; / *for ie11 */
  writing-mode: vertical-lr;
  text-align: center;
  margin:0 auto;
}
.content{
  width: 400px;
  background: #ccc;display: inline-block; / *forie & edge */ width: 100%; writing-mode: lr-tb; margin: auto; text-align: left; } .box .txt{ width: 80%; margin: auto; } front-end learning exchange group: 731771211 novice, advanced - resource sharing, let the dream illuminate the realityCopy the code

Look at these 23 vertical centered CSS, do you know which ones you have used? Do you have a trick that no one knows about?

Have you learned all 23 vertical centering techniques of CSS?

Related Posts

[Luffy]_leetcode- Offer 40- minimum number of k

Design Principle (4) : LSP Richter replacement principle

Js to achieve the mouse coordinates of the map after scaling relative to the original size