1 centered
horizontally
In line elements are centered horizontally
In line elements here refer to text, image img, hyperlink a, button, etc
text-align: center; /*Set on parent element*/
Block level elements are horizontally centered
1. Change the display attribute of the block level element to inline block, and then set text align: Center for the parent element
#div4 {
text-align: center
}
#div5 {
display: inline-block;
background-color: blue;
}
<div id="div4">
<div id="div5">The variable width element is centered horizontally</div>
</div>
2. Use absolute positioning
(1) When the width and height of the element are known, offset the element to the right by 50%, and set margin left to a negative value to move the element to the left by the corresponding distance relative to its original position.
#div6 {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
margin-left: -100px;
background-color: yellow;
}
<div id="div6">Fixed width element horizontal center</div>
(2) When the width and height of elements are known, use the magical margin: 0 auto;
Auto only takes the width and 0 of the remaining space of the parent element. When the layout mode of the element is static/relative and the width and height are known, auto takes the width of the remaining space of the parent element; when the layout mode of the element is position / absolute / fixed or float/inline or the width and height are unknown, auto takes 0.
Use the fluid characteristics of elements: when an absolute positioning element has specific positioning values for its opposite positioning direction attributes, the fluid characteristics occur.
#div3 {
position: absolute;
width: 300px;
height: 300px;
background-color: pink;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
(3) When the width and height of the element are unknown, the animation attribute: let the element offset 50% to the right, and then offset 50% to the left;
#div6 {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: yellow;
}
<div id="div6">The variable width element is centered horizontally</div>
- Horizontal centering with flex
#div1 {
display: flex;
}
#div2 {
background-color: pink;
margin: 10px auto;
}
<div id="div1">
<div id="div2">The variable width element is centered horizontally</div>
</div>
#div1 {
display: flex; /*Apply flex layout to parent element*/
justify-content: center; /*Sets the child elements of the spindle direction (default horizontal direction) to be centered*/
}
#div2 {
background-color: pink;
}
<div id="div1">
<div id="div2">The variable width element is centered horizontally</div>
</div>
Vertical center
Several methods:
1. Absolute positioning (horizontal and vertical centering of absolute positioning elements)
If the height of the child element is unknown, you can also use transfrom.
This method is mostly used for the horizontal and vertical centering of absolute positioning elements (the width and height can be known or unknown)
#div0 {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
#div2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute; //Absolute positioning
left: 50%;
top: 50%; //First deviate 50% from the height of the parent element
transform: translate(-50%,-50%); /*css3 Method of*/
/*margin-left: -50px;
margin-top: -50px; If the width and height of the element are known*/
}
<div id="div0">
<div id="div2">div2 Vertical center</div>
</div>
2. Combine margin: Auto through absolute positioning (vertical centering of absolute positioning elements)
This method is mostly used for the vertical centering of absolute positioning elements. The width of the centered element can also not be set, but if it is not set, it must be an element with size itself, otherwise it cannot be realized.
#div0 {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
#div2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom:0;
margin: auto
}
3. Through flex
This method is mostly used for the horizontal and vertical centering of multiple sub elements, and the width and height can be known or unknown.
#div0 {
width: 400px;
height: 400px;
background-color: pink;
display: flex; /*flex layout*/
align-items: center; /*Child elements centered vertically*/
justify-content: center; /*Child element horizontal center*/
}
#div2 {
width: 100px;
height: 100px;
background-color: yellow;
}
<div id="div0">
<div id="div2">div2 Horizontal vertical center</div>
</div>
4. table layout
#center {
background-color: red;
display: inline-block; /* In theory, table cell can only handle element layout with inline characteristics */
}
#container {
width: 400px;
height: 400px;
background-color: black;
display: table-cell; /*Set the display of the parent element*/
text-align: center; /* The child elements in the container are centered horizontally */
vertical-align: middle; /* Vertical center of child elements in container */
}
5. Realize the vertical centering of single line text through line height
Set the line height of the child element to be equal to the height of the parent element. This method is only applicable to single line text, and the height of the parent element must be known.
#div1 {
width: 400px;
height: 100px;
background-color: pink;
}
p {
line-height: 100px;
}
<div id="div1">
<p>awefawe</p>
</div>
6. Set padding for the parent element to realize the vertical centering of the child element
If you set equal upper and lower inner margins for the parent element, the child element will naturally be vertically centered. However, in this method, the height of the parent element cannot be set, so it should be filled automatically.
#div0 {
width: 400px;
background-color: pink;
padding: 100px 0;
}
#div2 {
width: 100px;
height: 100px;
background-color: yellow;
}
<div id="div0">
<div id="div2">div2 Horizontal vertical center</div>
</div>
2 background picture
background
The background abbreviation property can set all background properties in one declaration.
The attributes you can set are background color, background position, background size, background repeat, background origin, background clip, background attachment, and background image
The values are separated by spaces, regardless of order.
background-size
| value | describe |
|---|---|
| length | Set the height and width of the background picture. The first value sets the width, and the second value sets the height. If only one value is given, the second is set to auto |
| percentage | The percentage of the positioning area relative to the background is calculated. The first value sets the width and the second value sets the height. If only one value is given, the second is set to "auto" |
| cover | The aspect ratio of the image is maintained and the image is scaled to the minimum size that will completely cover the background positioning area. |
| contain | The aspect ratio of the image is maintained and the image is scaled to the maximum size that will fit the background positioning area. |
1. Achieve fixed aspect ratio scaling of background image
To achieve the fixed aspect ratio scaling of the background image, we use padding top: (percentage) to achieve it. The percentage of padding top is determined relative to the width of the containing block.
<style>
.con {
width: 100%;
padding-top: 140%;
background: url('image/One inch photo.jpg') no-repeat;
background-size: cover;
}
</style>
2. The method of making the background picture cover the container without deformation
This method is applicable to the whole browser window with pictures:
#app {
/*Pictures are spread all over the browser window. You can also set them on the body*/
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('./img/bg.png') no-repeat;
background-size: cover;
z-index: -1;
}
<body>
<div id="app"></div>
</body>
This method can only be used to fill containers with specified height
#app {
height: 500px; /*The picture can only be used to cover the container with the specified height*/
width: 100%;
background: url('./img/bg.png') no-repeat;
background-size: cover;
}
<body>
<div id="app"></div>
</body>
This method can be used to fill containers with unspecified height, but it is not applicable when there is text on the background
This method is to fill a container responsively.
.a {
width: 100%;
}
.b {
/*Use padding top to realize responsive background picture, height / width*/
/*Not applicable when there is text on the background, the text will be displayed at the bottom*/
padding-top: 60%;
background-image: url('./img/download.jpg');
background-size: cover;
}
<div class="a">
<div class='b'></div>
</div>
3. Fix the height of the background picture and make the width adaptive
.con {
width: 100%;
height: 300px;
background: url("image/vpb_intro/introduce_9.png") center center no-repeat;
background-size: cover;