CSS水平居中与垂直居中的方法
当我们页面布局的时候，通常需要把某一个元素居中，这一篇文章为大家介绍一下居中的几种方法，本人文笔有限，请见谅！
一.水平居中
行内元素水平居中的方法，我们使用text-align:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
.box {
/* 给块元素设置宽高 */
width: 300px;
height: 50px;
background-color: orange;
/* 水平居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<span>我是需要水平居中的文字</span>
</div>
</body>
</html>
块元素水平居中的方法
1.margin(外边距)的方法来做，使用margin:0 auto；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
.box {
/* 给块元素设置宽高 */
width: 300px;
height: 50px;
background-color: orange;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.使用absolute加margin-left的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
.box {
/* 给加一个绝对定位 */
position: absolute;
/* 向右百分之50 */
left: 50%;
/* 外边距再减自身宽度的一半 */
margin-left: -150px;
/* 给块元素设置宽高 */
width: 300px;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">我是定位加margin</div>
</body>
</html>
3.使用absolute加transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
.box {
/* 给加一个绝对定位 */
position: absolute;
/* 向右百分之50 */
left: 50%;
/* 横向上向左移动自身宽度的一半 */
transform: translateX(-50%);
/* 给块元素设置宽高 */
width: 300px;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">我是定位加transform</div>
</body>
</html>
4.flex弹性盒子方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: orange;
/* 给父级开启弹性盒子 */
display: flex;
/* 主轴对齐方式 */
justify-content: center;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
二.垂直居中
行内元素垂直居中，使用line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
.box {
width: 300px;
height: 50px;
background-color: orange;
/* 行高等于全部高度 */
line-height: 50px;
}
</style>
</head>
<body>
<div class="box"><span>我是垂直居中</span></div>
</body>
</html>
块元素垂直居中方法：
1.使用absolute加margin-top的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
.boss {
position: relative;
width: 300px;
height: 200px;
background-color: pink;
}
.box {
/* 给加一个绝对定位 */
position: absolute;
/* 向下百分之50 */
top: 50%;
/* 外边距再减自身高度的一半 */
margin-top: -25px;
/* 给块元素设置宽高 */
width: 300px;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div class="boss">
<div class="box">我是定位加margin</div>
</div>
</body>
</html>
2.flex方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: orange;
/* 给父级开启弹性盒子 */
display: flex;
/* 侧轴对齐方式 */
align-items: center;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
3.使用absolute加transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
.boss {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
.box {
/* 给加一个绝对定位 */
position: absolute;
/* 向下百分之50 */
top: 50%;
/* 横向上向上移动自身宽度的一半 */
transform: translateY(-50%);
/* 给块元素设置宽高 */
width: 300px;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div class="boss">
<div class="box">我是定位加transform</div>
</div>
</body>
</html>
感谢大家的阅读，如有什么不对的地方，可以向我提出，感谢大家！
