Copyright notice: This is the original article of the blogger. If there is any error in the article, please contact the blogger to correct it. Please don't leave a malicious message (please detour if you don't like it). You are welcome to reprint. Please indicate the original address when reprinting: https://blog.csdn.net/qq_37674616/article/details/82724657
Catalog
Text centered
1. Use text align and line height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Text centered</title>
<link rel="stylesheet" href="">
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
/*Vertical centering*/
line-height: 100px;
/*horizontally*/
text-align: center;
}
</style>
</head>
<body>
<div>Text centered</div>
</body>
</html>2. Using padding and text align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
div {
width: 100px;
/*Do not add height at this time*/
border: 1px solid red;
/*Vertical centering*/
line-height:30px;
padding: 35px 0;
/*horizontally*/
text-align: center;
}
</style>
</head>
<body>
<div>Text centered</div>
</body>
</html>Box centered
1. Horizontal center
Set width to child element itself
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>horizontally</title>
<link rel="stylesheet" href="">
<style>
div {
border: 1px solid red;
}
.parent {
width: 300px;
height: 300px;
}
.child {
width: 50px;
height: 50px;
/*horizontally*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>2. Vertical center
1. Set relative positioning
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vertical centering</title>
<link rel="stylesheet" href="">
<style>
div {
border: 1px solid red;
}
.parent {
width: 300px;
height: 300px;
}
.child {
width: 50px;
height: 50px;
/*horizontally*/
margin: 0 auto;
/*Achieve vertical center*/
position: relative;
top:50%;
/*The value is height/2*/
margin-top: -25px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>2. Set absolute positioning
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vertical centering</title>
<link rel="stylesheet" href="">
<style>
div {
border: 1px solid red;
}
.parent {
width: 300px;
height: 300px;
/*Set parent element to relative positioning*/
position: relative;
}
.child {
width: 50px;
height: 50px;
position:absolute;
/*horizontally*/
left: 50%;
/*Achieve vertical center*/
top:50%;
/*The value is height/2*/
margin-top: -25px;
/*Value is width/2*/
margin-left: -25px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>3. Set flex for parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vertical centering</title>
<link rel="stylesheet" href="">
<style>
div {
border: 1px solid red;
}
.parent {
width: 300px;
height: 300px;
display: flex;
/*The arrangement of the spindle is x-axis by default*/
justify-content: center;
/*Arrangement of cross axis*/
align-items: center;
}
.child {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>