当前位置:网站首页>Horizontal and vertical centering method and compatibility
Horizontal and vertical centering method and compatibility
2022-07-07 16:33:00 【Starry dream】
Method
The first way is through absolute positioning absolute + negative margin
First of all, we know the width and height of sub elements , Set... For child elements top:50%;left:50%,
But the absolute positioning is based on the upper left corner of the child element , The effect we want is to center the child elements .... With the help of the negative value of the outer margin , Negative outer margins allow elements to be positioned in the opposite direction ,
By specifying that the outer margin of the child element is a negative value that is half the width of the child element , You can center the child elements
** advantage :** It's easy to understand , Compatibility is good.
** shortcoming :** You need to know the width and height of the child elements
The second kind : Also through the way of absolute positioning absolute + margin auto
This is to set the distance in all directions 0, Let's talk about it again margin Set to auto; Just go
** advantage :** Compatibility is also good
** shortcoming :** You need to know the width and height of the child elements
The third kind of :absolute + calc( Calculation )
This method top The percentage of is based on the upper left corner of the element , Then subtract half of the width and height
calc: Any length value can be used calc() Function to calculate ;
calc() Function uses standard mathematical operation priority rules ;
It supports “+”, “-”, “*”, “/” operation
You can also view calc course :https://www.runoob.com/cssref/func-calc.html
** advantage :** His compatibility depends on calc The compatibility of
** shortcoming :** It is also necessary to know the width and height of child elements
A fourth :absolute + transform ( transition )
This method does not require the fixed width and height of child elements
Fix the absolute positioning problem , You can also use css3 Newly added transform,transform Of translate
Property can also set the percentage , It's relative to its width and height , So you can translate Set to -50%, You can center it
** advantage :** Less code
** shortcoming :**IE8 I won't support it , Property needs to add browser manufacturer prefix , May interfere with other transform effect , In some cases, text or element boundaries are rendered blurred .
The fifth :line-height
advantage : The code is concise
shortcoming : Valid only for text , Only valid for single line text , Multiline text cannot
The ninth : Elastic box way
By setting... To the parent element justify-content: center;
align-items: center; That's all right.
** advantage :** The mobile terminal can be used flexibly
** shortcoming :**pc The end needs to be judged according to the compatibility
The tenth :grid( Grid layout )
Set for parent display:grid;
Set the child element to align-self: center;justify-self: center;
** advantage :** Less code
** shortcoming :** Compatibility is not as good as flex, Suggest using flex
Don't know the width and height of the element :
shortcoming : Know the width and height of the element :
边栏推荐
- Laravel service provider instance tutorial - create a service provider test instance
- Excessive dependence on subsidies, difficult collection of key customers, and how strong is the potential to reach the dream of "the first share of domestic databases"?
- 【DesignMode】代理模式(proxy pattern)
- three.js打造酷炫下雪效果
- 二叉搜索树(特性篇)
- 修改配置文件后tidb无法启动
- Continuous creation depends on it!
- 01tire+链式前向星+dfs+贪心练习题.1
- Is it reliable to open an account on Tongda letter with your mobile phone? Is there any potential safety hazard in such stock speculation
- How to determine whether the checkbox in JS is selected
猜你喜欢
随机推荐
删除 console 语句引发的惨案
【DesignMode】享元模式(Flyweight Pattern)
The difference and working principle between compiler and interpreter
【医学分割】attention-unet
谈谈 SAP iRPA Studio 创建的本地项目的云端部署问题
Logback logging framework third-party jar package is available for free
spark调优(三):持久化减少二次查询
What about the pointer in neural network C language
Opencv configuration 2019vs
Bidding announcement: Fujian Rural Credit Union database audit system procurement project (re bidding)
Tidb cannot start after modifying the configuration file
Talk about the cloud deployment of local projects created by SAP IRPA studio
Odoo integrated plausible embedded code monitoring platform
[summary of knowledge] summary of notes on using SVN in PHP
MySQL数据库基本操作-DQL-基本查询
【DesignMode】外观模式 (facade patterns)
Opportunity interview experience summary
95. (cesium chapter) cesium dynamic monomer-3d building (building)
How does laravel run composer dump autoload without emptying the classmap mapping relationship?
[vulnhub range] thales:1