HTML Div uses CSS to achieve horizontal/vertical centering in several ways

CSS in the center, in the work, will often encounter. It can be divided into horizontal center and vertical center, here are several ways to achieve the center.
git View Source
Works better with online previews

In the following example, the value of the CSS property is involved.

    .parent-frame {      width: 200px;      height: 200px;      border: 1px solid red;    }    .child-frame {      width: 100px;      height: 100px;      border: 1px dotted blue;    }

1:text-align:center, Horizontal Center

Block element, centered horizontally

  <div class="parent-frame">    子元素水平居中    <i style="display:block; text-align: center;color: blue">块状元素，水平居中</i>  </div>

2:margin:0 Auto, center horizontally

Center horizontally. The upper and lower margins are 0, and the left and right margins are automatically calculated equally by the browser

  <div class="parent-frame">    子元素水平居中    <i class="child-frame" style="display: block;margin: 0 auto">块状元素，水平居中</i>  </div>

3:line-height value, centered vertically

Center vertically. The Line-height property sets the distance (row height) between rows. Negative values are not allowed.
The elements of a single line of text apply, and this method is not available in multiline elements. The element content is a single row, and its height is fixed,

  <div class="parent-frame">    <div style="line-height: 200px;">line-height值=父height值</div>  </div>

4: Horizontal centering with float property, with relative positioning

Set float to the parent element, then move the parent element to the right by 50%, and then move the child elements to the left by 50% to achieve horizontal centering.

Remember to clear the parent element floating.

  <div class="parent-frame">    <div style="float: left; position: relative; left: 50%; clear: both;" >      <div style="position: relative; left: -50%">虽然宽度不同weiqinl</div>    </div>    <div style="float: left; position: relative; left: 50%; clear: both;">      <div style="position: relative; left: -50%">但一样</div>    </div>    <div style="float: left; position: relative; left: 50%; clear: both;">      <div style="position: relative; left: -50%">水平居中了</div>    </div>    <div style="float: left; position: relative; left: 50%; clear: both;">      <div style="position: relative; left: -50%">使用float属性，记得清楚浮动</div>    </div>  </div>

5: Use table layout, default vertical Center

Table is vertically centered vertical-align:middle by default. If you also want to center horizontally, that is the inline element, adding the attribute Text-align:center

  <table class="parent-frame">    <tr>      <td>        table默认垂直居中[vertical-align: middle]      </td>      <td style="text-align:center;">        水平居中添加text-align:center      </td>    </tr>  </table>

6: Imitation Table,display:table-cell. and use the Vertical-align property to achieve vertical centering

This property sets the vertical alignment of the element.

Defines the vertical alignment of the baseline of the element within the row relative to the baseline of the row where the element is located. In a table cell, this property sets the alignment of the cells in the cell box.

  <div class="parent-frame" style="display: table-cell;vertical-align: middle">    <div>仿table: display:table-cell垂直居中vertical-align:middle</div>  </div>

7: Use absolute absolute positioning, with margin use, achieve horizontal vertical Center

Relative to the absolute positioning of the relative absolute, the need for a fixed width. At the same time, the top/bottom should be equal, and the sum does not exceed the fixed width. Right/left should also be equal, and the sum does not exceed the fixed width.

Use with Margin:auto again

  <div class="parent-frame" style="position: relative">    利用绝对定位，配合margin:auto自动计算外边距。    <div class="child-frame" style="position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">      定宽元素,需要确定的尺寸。relative是为了给子元素定位用。    </div>  </div>

8: Use absolute absolute positioning, with the negative value of margin (negative margins) to achieve horizontal vertical center.

Negative margins negative margin, it will make the structure collapse, using this feature to achieve.

  <div class="parent-frame" style="position: relative;">    利用绝对定位，配合margin的负值来实现居中。    <div class="child-frame" style="position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">      负边距来实现，水平垂直居中。需要知道该元素的具体大小    </div>  </div>

9: Horizontal vertical centering with absolute absolute positioning, with translate movement conversion

Use percentages to position an element absolutely, and use translate to center the element movement.

  <div class="parent-frame" style="position: relative;">    利用绝对定位，配合translate移动到水平垂直居中。    <div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">      不需知具体大小。支持IE9+及现代浏览器    </div>  </div>

10: Use Flex layout, set its properties justify-content,align-items all center, horizontal vertical Center

The parent element uses the Flex layout and defines two property values Justify-content,align-items are center, then defined as horizontal vertical centering

The Justify-content property defines how the item is aligned on the spindle. The Align-items property defines how the item is aligned on the intersection axis.

  <div class="parent-frame" style="display: flex; justify-content: center; align-items: center">    <div class="child-frame">使用flex布局，justify-content属性定义了项目在主轴上的对齐方式。</div>    <div class="child-frame">      align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中，则水平、垂直居中对齐    </div>  </div>

11: Use Flex layout, with Margin:auto to achieve horizontal vertical centering.

The parent element uses the flex layout, and the child elements use the Margin:auto

  <div class="parent-frame" style="display: flex;">    <div style=" margin: auto;">父元素使用flex布局，子元素配合margin:auto使用</div>  </div>

git View Source
Online preview

Finish

HTML Div uses CSS to achieve horizontal/vertical centering in several ways