What should you pay attention to when centering elements in HTML?

This time I will bring you what you need to pay attention to about the centering of elements in HTML. What you need to pay attention to about the centering of elements in HTML. The following is a practical case, let's take a look.

Do not use positioning

Horizontal centering: text-align = center; (inheritable)

Vertical centering: margin:0 auto;( Block-level elements)

Others centered: 1. Text centering: set the height of the parent element and set the height of the child element line-height=height (parent element)

　　 　　 2. Picture Centered: vertical-aign: middle;

.first{
    width: 300px;
    height: 100px;
    background-color: black;
    color: white;
    text-align: center;
    margin: 0 auto; //针对块级元素
  }

<div class="first">
不使用定位（1）
</div>

.second{
    width: 300px;
    height: 100px;
    background-color: green;
  }
  .s_child{
    width: 150px;
    line-height: 100px;
  }
<div class="second">    
<div class="s_child">   
   不使用定位（2）    
</div> 
</div>

2. Positioning and centering

a. The height of the parent element is fixed.

Parent element: Relative positioning

Child element: Absolute positioning

Top:50% (half the height of the parent element)

Left:50%

　　　　margin-top: half of its own height; (add a negative sign)

　　　 margin-left: half of its own width; (add a negative sign)

.dw_one{
      width: 600px;
      height: 300px;
      position: absolute;
      background: black;
    }
    .dw_one_child{
      background: white;
      position: relative;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px;
    }
    <div class="dw_one">
    <div class="dw_one_child">
      a    
    </div>
    </div>

b .The height of the parent element is not fixed

.wrapper{
      width: 600px;
      height: 600px;
    }
    .dw_two{
      width: 100%;
      height: 100%;
      position: absolute;
      background: black;
    }
    .dw_two_child{
      background: white;
      position: relative;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      transform:translate(-50%, -50%);
      -moz-transform:translate(-50%, -50%);
      -ms-transform:translate(-50%, -50%);
      -o-transform:translate(-50%, -50%);
      -webkit-transform:translate(-50%, -50%);
    }
    <div class="wrapper">
  <div class="dw_two">
      <div class="dw_two_child">
        a
      </div>
  </div>
</div>

3. Regarding the centering of multi-line text

Use display:table; display:table-cell;

　vertical-align :middle; Center

#outer{
           width: 200px;
           height: 200px;
           background: #cccccc;
           display: table;
           _position: relative;   // "_"为了兼容IE6
       }
       #inner{
           display: table-cell;
           vertical-align: middle;
           _position: absolute;
           _top: 50%;
       }
       #content{
           _position: relative;
           _top: -50%;
       }
<div id="outer">
     <div id="inner">
       <div id="content">
          Paradise_追逐者所写的居中问题总结之我见
       </div>
    </div>
</div>

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to implement HTML-like command line interface

meta name="" content="should how to use

The above is the detailed content of What should you pay attention to when centering elements in HTML?. For more information, please follow other related articles on the PHP Chinese website!