Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”. This article also participates in the “Digitalstar Project” to win the creation gift package and challenge the creation incentive money

Horizontal center

1. Inline elements

Characteristics of inline elements:

(1) Width and height is the height of the content, which cannot be changed

(2) It is only effective to set left and right direction for margin, but not up and down; The padding Settings are valid for both top, bottom, left, and right, which means more padding

(3) and other elements in a line, does not automatically newline

(4) Inline elements can only be inline elements and cannot contain block-level elements

(5) Convert to inline elements by using display:inline

Common inline elements:

Button, IMG, INPUT, label, SPAN, Textarea, select (drop-down list)….

For an inline element, set text-align:center to its parent to center the inline element horizontally

<div class="parent"> <span class="child"> center </span> </div> <style>. text-align: center; /* horizontal center */}. Child {color: # FFF; background-color: rgb(16, 190, 16); } </style>Copy the code

2. Block elements

Characteristics of block elements:

(1) Can recognize the width and height, width is not set by default to 100%

(2) Margin and padding are both valid

(3) It can be wrapped automatically

(4) Multiple block element labels are written together, and the default arrangement is from top to bottom

(5) Display :block can be converted to block elements

(6) Block-level elements can contain block-level elements and inline elements

Common block elements:

Div, P, ul, OL, LI, aside, h, form, table and other semantic tags….

2.1 Fixed width and height

When the width and height are fixed, the following HTML example:

<div class="parent">
    <div class="child"></div>
</div>

<style>
    .parent {
      height: 100px;
      background-color: aqua;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
</style>
Copy the code

Add the following four CSS methods to achieve a horizontal center effect:

Margin: 0 auto

<style>
  .child {
    margin:0 auto;
  }
</style>
Copy the code

Absolute + margin-left

<style>
  .child {
    position: absolute;
    margin-left: -50px;
    left: 50%;
  }
</style>
Copy the code

Method 3: Absolute + calc

The calc() function is used to dynamically calculate the length value.

  • Note that we need to reserve a space before and after the operator, for example:width: calc(100% - 10px);
  • Any length value can be computed using the calc() function;
  • The calc() function supports “+”, “-“, “*”, “/”;
  • The calc() function uses standard mathematical precedence rules;
<style>
  .child {
    position: absolute;
    left: calc(50% - 50px);
  }
</style>
Copy the code

Mode 4: Absolute + left + right + margin

<style>
  .child {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
</style>
Copy the code

2.2 Variable width and height

When the width and height are different, the following tests are performed:

<div class="parent"> <div class="child"> Test example </div> </div> <style>. Parent {height: 100px; background-color: aqua; } .child { background-color: blueviolet; color: #fff; } </style>Copy the code

The display effect of the following three methods is:

Method 1: Use the transform property new in CSS3

The transform property allows us to rotate, scale, move, or tilt elements.

Translate (x,y) defines a 2D transform

Translate3d (x,y,z) defines 3D transformation

<style>
.child{
	position:absolute;
	left:50%;
	transform:translate(-50%,0);
}
Copy the code

Method 2: Flex layout

The context-content attribute defines the alignment of the item on the main axis (horizontal).

Justify -content can be:

  • flex-start(Default) : Left-justified
  • flex-end: the right alignment,
  • centerCenter:
  • space-between: Align both ends with equal spacing between items.
  • space-around: Equal spacing on both sides of each item (similarmargin-left = margin-right). As a result, the spacing between items is twice as large as the spacing between items and the border.
<style>
.child{
	display:flex;
	justify-content:center;
}
</style>
Copy the code

Width: fit-content

<style>
.child{
	width:fit-content;
	margin:0 auto;
}
Copy the code

Fit-content is a new attribute value added to the width attribute in CSS3. It can be easily centered horizontally with margin.

Vertical center

1. Inline elements

HTML sample:

<div class="parent"> <span class="child"> Test example </span> </div> <style>. background-color: aqua; text-align: center; /* horizontal center */}. Child {color: # FFF; background-color: blueviolet; } </style>Copy the code

Add the following five styles of CSS code to achieve vertical centralization

Single-line text

Set the line height

<style>
.child{
	line-height:100px;
}
Copy the code

Vertical-align :middle layout is used when multiple lines are confusing

Multiline text

Method 1: display: table-cell + vertical-align

The vertical-align property sets the vertical alignment of elements.

The vertical-align attribute can be used in two environments:

  • Aligns the inline element box model vertically with its inline element container. For example, to vertically align a picture within a line of text:

  • Vertically aligned table cell contents:

However, vertical-align only applies to inline elements and table cell elements, and cannot be used to align block-level elements vertically. Therefore, the vertical-align attribute only works when the parent layer is TD or TH. Other block-level elements, such as div and P, are not supported by default.

To use vertical-height, we need to set the parent element display:table and the child element display:table-cell; vertical-align:middle;

<style>
.parent{
	display:table;
}

.child{
	display:table-cell;
	vertical-align:middle;
}
</style>
Copy the code

Method 2: display: inline-block+vertical-align An implicit ghost node

Set the height of the ghost node and the baseline of the ghost node (by line-height), set the x-height of the ghost node, align the middle line of the span with the middle line of the ghost node, also can make vertical-align:middle; In the middle

<! DOCTYPE html> <html lang="en"> <body> <div class="parent"> <span Class =" Child "> Test Example Test Example Test Example Test Example Test Example Test Example Test Example Test Example Test Example </ SPAN > </div> <style>  .parent { height: 100px; background-color: aqua; text-align: center; /* horizontal center */ line-height: 100px; }. Child {color: # FFF; background-color: blueviolet; vertical-align: middle; line-height: normal; Display: inline-block; display: inline-block; </style> </body> </ HTML >Copy the code

Mode 3: Writing -mode layout

The writing-mode attribute defines how text is laid out horizontally or vertically.

  • Horizontal-tb: Horizontal top-down writing. The left – right – top to bottom
  • Vertical-rl: indicates that the vertical direction is written from right to left. The top – bottom – right – left
  • Vertical-lr: the contents are from top to bottom in the vertical direction and from left to right in the horizontal direction
  • Sideways -rl: Content is vertically arranged from top to bottom
  • Sideways -lr: Content is arranged vertically from bottom to top
<style>
.parent{
	writing-mode:vertical-lr;
}

.child{
	writing-mode:horizontal-tb;
}
</style>
Copy the code

Mode 4: Display: Grid layout

<style>
.parent{
	display:grid;
}
.child{
	margin:auto;
}

Copy the code

2. Block level elements

2.1 Fixed width and height

HTML sample:

<div class="parent">
  <div class="child"></div>
</div>
<style>
  body {
    background-color: aqua;
  }
  .child {
    width: 50px;
    height: 50px;
    background-color: blueviolet;
  }
</style>
Copy the code

Add the following CSS methods to achieve a vertical center effect.

Method 1: Absolute +margin-top

<style> .child{ position:absolute; margin-left:-25px; left:50%; margin-top:-25%; Top: 50%; } </style>Copy the code

Method 2: Absolute + calc

<style>
.child{
	position:absolute;
	left:calc(50% - 25px);
	top:calc(50% - 25px)
}
</style>
Copy the code

Absolute +left+right+top+bottom

<style>
.child{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto
}
</style>
Copy the code

2.2 Variable width and height

When the width and height are variable, an HTML example:

<div class="parent"> <div class="child"> Test example </div> </div> <style>. Parent {height: 100px; background-color: aqua; } .child { background-color: blueviolet; } </style>Copy the code

The following types of CSS can achieve the following vertical centralization:

Method 1: Use the transform property new in CSS3

You need to set parent to position:relative

<style>
.parent{
	position:relative;
}
.child{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
Copy the code

Method 2: Flex layout

<style> .parent{ display:flex; height:100%; justify-content:center; /* align-items:center */} </style>Copy the code

Resources: CSS provides N ways to center elements horizontally and vertically

The code in question: gitee.com/xin-yue-qin…