This is the 26th day of my participation in the August Text Challenge.More challenges in August

Front-end development process, often encounter the need for DOM elements in the center of the scene, such as inline text center, part of the DOM node in the parent element vertical horizontal center and so on, in the face of different situations, there are many ways to achieve the center, today let us review the DOM element in the center of a variety of ways to achieve.

Center is often asked in the interview process of the front-end basic interview questions, the interviewer will sometimes only ask the center, but please do not forget that center is divided into a variety of situations oh, in the face of this question, be sure to answer the idea of clear and accurate.

More articles in my Github and personal public account [full zhandao road], welcome to watch [an unknown football dog’s front knowledge point], if there are benefits, do not pay, little hands point a Star

Read this article and you will learn

  • Horizontal middle implementation
  • Vertical middle implementation

Horizontal center

Inline elements

.parent {
	text-align: center;
}
Copy the code

Block-level elements

Center the base

.son {
	margin: 0 auto;
}
Copy the code

Flex flexible layout

  • This is one of the most commonly used methods in development, and it is also the fastest way to implement centralization. It can be used for both highly fixed and non-fixed DOM elements, and Flex layouts are currently compatible, making it the preferred way to solve centralization problems.
  • However, there are some problems with this approach. If you introduce components that do not use Flex layout into your development, it will affect the layout of the page and require style overwriting, so you can choose the appropriate method according to your own needs during the development process.
.parent {
	display: flex;
	justify-content: center;
}
Copy the code

Absolute positioning mode

  • Transform displacement mode
    • The basic computing position of THE DOM node is adjusted to the center of the parent node, and then the middle is achieved by moving half the width of the child node in reverse direction.
.parent {
	position: relative;
}
.son {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
Copy the code
  • Negative margin displacement mode
    • The principle is the same as the transform displacement mode.
.parent {
	position: relative;
}
.son {
	position: absolute;
	width: xx;
	left: 50%;
	margin-left: -.5*xx
}
Copy the code
  • Horizontal zero value mode
.parent {
	position: relative;
}
.son {
	position: absolute;
	width: xx;
	left: 0;
	right: 0;
}
Copy the code

Vertical center

Inline elements

  • The vertical center of a single line of text only needs to place the text nodeParent node height === Child node row heightCan.
.parent {
	height: single_line_height;
}	
.son {
	line-height: single_line_height;
}
Copy the code

Block-level elements

Inline block-level elements

  • Using display: inline – block; vertical-align: middle; And a pseudo-element to keep the content block in the center of the container.
.parent::after{
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}
.son{
	display:inline-block;
	vertical-align:middle;
}
Copy the code

The table layout

  • This way can solve the problem, but in view oftableLayouts are less used and SEO unfriendly and are not recommended.
.parent {
	display: table;
}
.son {
	display: table-cell;
	vertical-align: middle;
}
Copy the code

Flex flexible layout

.parent {
	display: flex;
	align-items: center;
}
Copy the code

Absolute positioning mode

  • Transform displacement mode
    • The principle is the same as that of horizontally centered transform displacement
.son {
    position: absolute;
    top: 50%;
    transform: translateY( -50%);
}
Copy the code
  • Negative margin displacement mode
    • The principle is the same as the horizontal centered negative margin displacement
.son {
	position: absolute;
	height: xx;
	top: 50%;
	margin-left: -.5*xx
}
Copy the code
  • Vertical zero value mode
.son {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
Copy the code

Write in the last

If you find this article beneficial to you, please like it and share it with more people who need it!

Welcome to pay attention to [Quanzhandao road] and wechat public account [Quanzhandao Road], get more good articles!
If you need [Baidu] & [Bytedance] & [JINGdong] & [Ape Tutoring], please leave a message, you will enjoy VIP speed push service ~

Past oliver

Deep and shallow copies of the front end

Chrome Developer Tools to Improve development efficiency

Create a personalized Github profile

Implementation of wechat JS API payment

The interviewer asks you<img>What would you say about the element

Special JS floating-point number storage and calculation

Long [word] baidu and good interview after containing the answer | the nuggets technology essay in the future

Front end practical regular expression & tips, all throw you 🏆 nuggets all technical essay | double festival special articles

A detailed explanation of the unpopular HTML tabIndex

A few lines of code teach you to solve the wechat generated posters and two-dimensional code

Principle of Vue3.0 Responsive data: ES6 Proxy

Make the interviewer fall in love with you

How to draw a fine line gracefully

[3 minutes] Front-end performance optimization -HTML, CSS, JS parts

Front-end performance Optimization – Page loading speed optimization

Front-end Performance Optimization – Network transport layer optimization