1. Center text horizontally and vertically
2. The box is centered horizontally and vertically
1. Margins
2. Positioning
3. Panning
4. Elastic Box (simple, fast, commonly used, recommended)
Dividing line----------------------------------------------
1. Center text horizontally and vertically
line-height = height 文本垂直居中
text-align:center 文本水平居中display effect
<style>
.box1{
/* 元素左浮动 */
float: left;
width: 200px;
height: 200px;
background-color: red;
color: #fff;
}
.box2{
/* 元素左浮动 */
float: left;
width: 200px;
height: 200px;
background-color: green;
color: #fff;
/* 设置元素外边距 */
margin-left: 20px;
/*文本垂直居中*/
line-height: 200px;
/* 文本水平居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="box1">文本原来位置</div>
<div class="box2">文本水平垂直居中</div>
</body>2. The box is centered horizontally and vertically
1. The box is horizontally centered in the browser (a mask used by many web page layouts)
margin: 0 auto;Effect display
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
color: #fff;
/* 上下外边距为0，左右外边距为自适应 */
/* margin: 0 auto; */
/* 简写 */
margin: auto;
}
</style>
</head>
<body>
<div class="box">盒子水平居中</div>
</body>2. The box is horizontally centered in the parent box (margin)
水平方向：auto 自适应
垂直方向：（父级元素高度/2)-（子元素/2）
存在问题：高度塌陷
父级元素会跟着子元素margin向下移动
解决问题：
给父级元素添加 overflow:hidden; display effect
<style>
.outer{
width: 400px;
height: 400px;
background-color: red;
/* 解决高度塌陷问题 */
overflow: hidden;
}
.inner{
width: 100px;
height: 100px;
background-color: green;
/*
子元素水平垂直居中
*/
margin: 150px auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>3. The box is horizontally centered in the parent box (positioning position)
使用定位让盒子水平垂直居中
1.给盒子设置定位
2.设置盒子的top、left（或bottom、right）偏移量为
top:50%
left:50%
3.设置盒子的外边距
margin-top:-(盒子高度/2)
margin-left:-(盒子宽度/2)display effect
<style>
.outer{
/* 父级元素相对定位 子绝父相 */
position: relative;
width: 300px;
height: 300px;
background-color:pink;
}
.inner{
/* 子元素绝对定位 */
position: absolute;
width: 100px;
height: 100px;
background-color: green;
/* 水平垂直居中 */
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>4. The box is horizontally centered in the parent box (transform transform)
配合定位使用：
1.给盒子添加定位
2.设置盒子的top、left偏移量（同上）
3.设置盒子在水平垂直方向的平移(相对于自身进行平移)
transform: translate(-50%,-50%) display effect
ditto
<style>
.outer{
/* 父级元素相对定位 子绝父相 */
position: relative;
width: 300px;
height: 300px;
background-color:pink;
}
.inner{
/* 子元素绝对定位 */
position: absolute;
width: 100px;
height: 100px;
background-color: green;
/* 水平垂直居中 */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>Later, I learned a method and added it.
4. The box is horizontally centered in the parent box (flexible box) (recommended)
1.使用display:flex将父级盒子转换为弹性盒子
2.使用弹性盒子的属性
justify-content: center;
align-items: center;Effect:
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 500px;
background-color: green;
/* 将父级盒子设为弹性盒子 */
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>Directly and easily realize the vertical and horizontal centering of the box
The above is my own summary, please give advice