In a recent interview, the interviewer asked the CSS horizontal vertical center layout way, for just entered the front end of not long I, no doubt is a face meng, idle to consult data analysis of a wave, to share with you, to avoid the pit. Let’s start by explaining HTML and some basic CSS styles. html

<body> <div class="div1"> <div class="box size"> Vertically centered </div> </div> </body>Copy the code

The common CSS code is as follows

<style type="text/css">
			/* Public style */
			.div1{
				width: 300px;
				height: 300px;
				border:1px solid aqua;
				
			}
			.box{
				background: #00FFFF;
			}
			.box.size{
				width:100px;
				height:100px;
			}
</style>
Copy the code

These CSS styles will be included by default in subsequent introductions, so I won’t go over them again!

Absolute and margin Auto

Similarly, the width and height of the center element must be fixed, and the width and height of the child element need to be known. In this way, by setting the distance in all directions to be 0, and then setting margin to Auto, the center element can be centered in all directions

.div1{
				position: relative;
			}
			.box{
				position: absolute;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
				
				margin: auto;
			}
Copy the code

Absolute and margin (negative)

A brief explanation of the principle, using absolute positioning, absolute positioning percentage is relative to the width and height of the parent element, so we can use this principle to center the element. Note, however, that absolute positioning is based on the upper-left corner of the child element, but to center the child element, you need to solve this problem. In this case, we can use the negative value of margin to achieve the effect. When the margin is negative, the element is positioned in the opposite direction, so we can set the margin of the child element to half the width and height of the child element. (PS: The disadvantage is that you have to get the width and height of the child element)

.div1{
				position: relative;
			}
			.box{
				top: 50%;
				left: 50%;
				position: absolute;
				margin-top: -50px;
				margin-left: -50px;
			} 
Copy the code

Absolute and calC

Css3 also requires that the width and height of the child elements be fixed, and that the width and height are known. The percentage of top is based on subtracting half of the width from the top left corner of the element.

.div1{
			   position: relative;
		   }
		   .box{
			   position: absolute;
			   top: calc(50% - 50px ); 
				/* There is no space before or after the minus sign. This style does not work */
			   left: calc(50% - 50px );
		   }
Copy the code

One interesting thing I noticed while writing this code is that if there is no space before or after the minus sign calc (50%-50px), the style will not work. If there is a space, it will work normally

The following method sets the HTML without knowing the width and height of the child elements:

<body> <div class="div1"> <div class="box"> </div> </div>Copy the code

The public CSS is

	.div1{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			.box{
				background: #00FFFF;
			}
Copy the code

4. Flex (Common)

Flex is a modern layout scheme that requires only a few lines of code to center

.div1{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
Copy the code

Five, the lineheight

Horizontal and vertical centering is also possible using the inline element centering attribute. Set box to an inline element and center it horizontally with text-align or vertical-align in the vertical direction (PS: this method requires resetting the text display on the child element to the desired effect)

          .div1{
				line-height: 300px;
				text-align: center;
				font-size: 0px;
			}
			.box{
				font-size: 10px;
				display: inline-block;
				vertical-align: middle;
				line-height:initial;
				/* Correct the text */
			 	text-align: left;
	        }
Copy the code

Absolute and transform

There is no need for the child element to be fixed in width and height, but it depends on translate2D compatibility

           .div1{
				position: relative;
			}
			.box{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
Copy the code

Seven, CSS – table

The new TABLE attribute of the CSS can change the display effect of ordinary elements into table elements, and can also achieve horizontal center

           .div1{
				display:table-cell;
				text-align: center;
				vertical-align: middle;
			}
			.box{
				display:inline-block;
			}
Copy the code

The above is my summary of some centered layout methods, and what other welcome to add! Personal feeling: I prefer Absolute + Margin Auto, Flex, Absolute and Transform. I’d better use Flex for mobile terminal and ABSOLUTE + Margin Auto for PC terminal

If you feel it helps, please move your little hands and give a thumbs-up! Your “like” is my biggest support