How to center an element horizontally-Front-end Q&A-php.cn

How to center an element horizontally

藏色散人

Release： 2020-07-02 10:55:30

Original

4546 people have browsed it

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.

How to center an element horizontally

##(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>

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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

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

Copy after login

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>

Copy after login

 .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% */
 }

Copy after login

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!