当我们页面布局的时候，通常需要把某一个元素居中，这一篇文章为大家介绍一下居中的几种方法，本人文笔有限，请见谅！
一.水平居中
行内元素水平居中的方法，我们使用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>
感谢大家的阅读，如有什么不对的地方，可以向我提出，感谢大家！
