Home > Article > Web Front-end > How to center an element horizontally

How to center an element horizontally

藏色散人Original: 2020-07-02 10:55:304507browse

Methods to horizontally center an element: 1. For inline elements, you can use the "text-align: center;" attribute to achieve horizontal centering; 2. For block-level elements, you can use the "margin: 0 auto" attribute to achieve horizontal centering. Centered; 3. Implemented through flex, set the main axis direction to be centered.

##(1) Inline elements (text, Pictures, inline tags (

span), inline block tags (display: inline-block)): text-align: center, below with span For example:

<p class="father">
  <!-- 行内元素 -->
  <span class="son">hello</span> </p>

.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  text-align: center;}

Advantages: good compatibility, simple

Disadvantages:

text-alignhas inheritance and will affect descendant elements

(2) Block-level elements:

margin: 0 auto

<!-- 相对于body居中 --><body>
  <!-- 块级元素 -->
  <p class="son"></p></body>

.son {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;}

Advantages: simple, good compatibility

Disadvantages: the width must be known and smaller than the parent Level element

(3)

flex Implementation, set the main axis direction to be centered

 <p class="father">
   <span class="son"></span>
 </p>

.father {
  width: 500px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  justify-content: center;}.son {
  width: 100px;
  background-color: turquoise;}

If there are multiple elements, it can be set to:

justify-content: space-around; /* 子元素左右两边距离均匀分布 */或justify-content: space-between; /* 最左边和最右边元素靠紧父元素，其余均匀 */

Advantages: Convenient , can achieve self-adaption

Disadvantages: slightly poor compatibility, PC side

IE10 and above support

(4) Absolute positioning implementation: the child must be the same as the father

 <p class="father">
   <span class="son"></span>
 </p>

 .father {
   width: 500px;
   height: 100px;
   border: 1px solid red;
   position: relative;
 }

 .son {
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: red;
   left: 50%;
   transform: translate(-50%);/* margin-left: -50% */
 }

Advantages: Very few advantages. You can use positioning for elements that are difficult to center.

margin-leftBetter compatibility

Disadvantages: out of document flow, lots of code, compatible The performance is slightly worse,

IE9 and above support transform, and you need to know the width value.

Recommended learning: "

Front-end Video"

The above is the detailed content of How to center an element horizontally. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：How to clean up floats when a container contains several floating elementsNext article：How to clean up floats when a container contains several floating elements

See more

How to center an element horizontally

Related articles