Several methods of css centering

In web design, centering is very important for both aesthetics and legibility. In CSS, there are many ways to achieve centering. Here are some commonly used methods.

1. Text centering

1. Inline element text centering

For a single line of text, we can use the text-align attribute to complete the centering.

<div style="text-align: center;">这里是居中的文本</div>

2. Block element text is centered

For multi-line text or block elements, we can use the margin attribute to set the left and right margins to auto, and set the width to not 100% to complete the centering.

<div style="margin: 0 auto; width: 80%;">这里是居中的多行文本</div>

2. Element centering

1. Horizontal centering

Use the margin attribute and set the left and right margins to auto to complete horizontal centering.

<div style="margin: 0 auto;"></div>

2. Vertical centering

The vertical centering method is more complicated and there are many ways to implement it.

(1) Use Flexbox

to set display:flex and align-items:center on the parent element to achieve vertical centering.

<div style="display: flex; align-items: center; height: 200px;">
  <div>这里是垂直居中的元素</div>
</div>

(2) Use table-cell

Set display:table and vertical-align:middle on the parent element, and set display:table-cell on the child element to achieve vertical centering .

<div style="display: table; height: 200px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

(3) Use absolute

to set position:absolute;top:50%;left:50% and transform:translate(-50%,-50%) on the child element, that is Vertical centering is possible.

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">这里是垂直居中的元素</div>
</div>

(4) Use line-height

Set height and line-height on the parent element to be equal, and set vertical-align:middle on the child element to achieve vertical centering.

<div style="height: 200px; line-height: 200px;">
  <div style="display: inline-block; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

Through the above methods, we can easily achieve the centering effect of elements in web pages. It is necessary to choose the appropriate method according to the specific situation to achieve better visual effects on the page.

The above is the detailed content of Several methods of css centering. For more information, please follow other related articles on the PHP Chinese website!