Horizontal center

Margin: 0 auto; Text-align: center; text-align: center; Margin: 0 auto; margin: 0 auto; Absolutely positioned element with floating element centered: 1. Left: 50%; Margin-left :- half the width of its element; In the flex box: center the main axis and center the side axis of the parent element (align-items: Cener; justify-content:center;)Copy the code

Vertical center

Text centered vertically in the box: Line height equals height Picture centered vertically in the box: Measure the box centered vertically in the box: Measure the text centered vertically: line height equals the height of the parent box; Margin-top:; margin-top:; margin-top:; Positioned box: top: 50%; Margin-top: - Half of its own height. Set vertical-align: middle for the line block element;Copy the code

The off-scale element box is centered

1. margin: 0 auto; 2. Position: Absolute; left: 50%; margin-left: -25px; 3. position: absolute; left: 50%; Transform: translate(-50%); transform: translate(-50%);Copy the code

Text removed ellipsis display

/* Set the display mode for the overflow part */ overflow: hidden; /* overflow: ellipsis; /* overflow: ellipsis; * webkit-line-clamp: 2; /* Text display mode, default level */ -webkit-box-orient: vertical; Display: -webkit-box;Copy the code