Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > A brief overview of 4 ideas for using CSS to achieve horizontal centering

A brief overview of 4 ideas for using CSS to achieve horizontal centering

高洛峰
Release： 2017-03-13 17:38:27
Original
1264 people have browsed it

Horizontal centering is a frequently encountered problem. It seems that there are many ways, and all roads lead to Rome. But after a systematic review, it actually revolves around several ideas. This article will introduce 4 ideas about horizontal centering. Friends who are interested can refer to it

Previous words
Horizontal centering is often encountered The problem. It seems that there are many ways, and all roads lead to Rome. But after a systematic review, it actually revolves around several ideas. This article will introduce 4 ideas about horizontal centering. Friends who are interested can refer to it!

Idea 1: Set text-align:center in the parent element to achieve horizontal centering of inline elements

The display of the element is set to inline-block, so that the child elements become inline elements

[Note] To be compatible with IE7-browser, you can use display:inline;zoom:1; Achieve the effect of inline-block

<style>   
.parent{text-align: center;}       
.child{display: inline-block;}   
</style>    
<p class="parent" style="background-color: gray;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>
Copy after login


##Idea 2: Set it in its own element margin: 0 auto implements horizontal centering of block-level elements

[1]Display the sub-element as a table, making the sub-element a block-level element. At the same time, the table is also wrapped, and the width is expanded by the content

[Note] If you want to be compatible with IE7-browser, you can change the structure of the child to

DEMO
<style>   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>    
<p class="parent" style="background-color: gray;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>
Copy after login


【2】If the child element has a fixed width, you can use

absolute positioningbox modelattribute, to achieve the centering effect; if the width is not set, the child element is stretched 

<style>   
.parent{   
  position: relative;   
}   
.child{   
 position: absolute;   
 left: 0;   
 rightright: 0;   
 margin: 0 auto;   
 width: 50px;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>
Copy after login


##Three ideas: use the offset attribute of absolute positioning Achieve horizontal centering
【1】With translate() displacement
function
The percentage of the translate function is relative to itself width, so left:50% combined with translateX(-50%) can achieve a centered effect
　[Note] IE9-browser does not support

<style>   
.parent{   
  position: relative;   
}   
.child{   
  position: absolute;   
  left: 50%;   
  transform:translateX(-50%);   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>
Copy after login


【2】With relative


The offset attribute of relative is relative to itself, because the child element has been set to absolute, so if you use relative, you need to add a layer of
　[Note] This method is fully compatible, but it adds an html structure

<style>   
.parent{   
  position: relative;   
}   
.childWrap{   
  position: absolute;   
  left: 50%;   
}   
.child{   
  position: relative;   
  left: -50%;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="childWrap">   
    <p class="child" style="background-color: lightblue;">DEMO</p>    
  </p>      
</p>
Copy after login


【 3】With negative margin


The percentage of margin is relative to the containing block, so a layer of

structure needs to be added. Since the default value of width is auto, when negative margin is set, width will also increase. Therefore, fixed-width processing is required at this time
　[Note] Although it is fully compatible, it requires additional page structure and fixed-width processing, so the application scenarios are limited

<style>   
.parent{   
  position: relative;   
}   
.childWrap{   
  position: absolute;   
  left: 50%;   
}   
.child{   
  width:50px;   
  margin-left:-50%;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="childWrap">   
    <p class="child" style="background-color: lightblue;">DEMO</p>    
  </p>      
</p>
Copy after login


Idea 4: Use the flexible box model flex to achieve horizontal centering
[Note] IE9-browser does not support
[1] In scaling Set the main axis alignment on the container jusify-content:center

<style>   
.parent{   
  display: flex;   
  justify-content: center;   
}   
</style>    
<p class="parent" style="background-color: gray;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>
Copy after login


【2】Set margin on the scalable project: 0 auto

<style>   
.parent{display: flex;}   
.child{margin: 0 auto;}   
</style>    
<p class="parent" style="background-color: gray;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>
Copy after login

The above is the detailed content of A brief overview of 4 ideas for using CSS to achieve horizontal centering. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css水平居中
source：php.cn
Previous article：Using CSS to achieve text wrapping effect on images Next article：Use CSS3 to achieve ever-changing text shadow text-shadow effect design
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
Status update not working in React-Native on Android I have some code that has pairs of images in a swipeable horizontal gallery. Now when you ...
From 2024-04-06 16:54:10
0
1
410
Vertically rotated table title, centered + bottom aligned, cross-browser I have a table with rotated headers that looks as expected in Chrome, but not in Firefox. ...
From 2024-04-04 16:45:25
0
1
330
Rewritten title: Center a fixed HTML square or circle element horizontally and vertically when resized How to center a square or circle fixed html element of varying sizes horizontally and vert...
From 2024-04-04 12:31:51
0
1
322
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved