5种常见的居中形式
今天呢，我们主要细讲一下css常见居中形式，我们知道有块状元素水平居中垂直居中以及利用定位居中，或者文字的水平或者垂直居中。且慢，细听！！！ 一、块元素水平居中
这个用法就是：margin：0 auto；
我们在开发过程中，我们刚开始遵循标准流，块元素就是独占一行，且在浏览器最左边对齐，这样开发出来的网页是很难看的，一般网页遵循居中显示，大小一般是960px 、980px 等，是小于浏览器屏幕显示的。
我们写一个例子，说明一下上面的意思：
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style>.box{ width: 980px; height: 400px; margin: 0 auto; } .head{ background-color: aqua; } .head1{ width: 200px; height: 200px; background-color: green; margin: 0 auto; } .banner{ background-color: cadetblue; } </style></head><body> <div class="box head"> <div class="head1"></div> </div> <div class="box banner"></div></body></html>
margin：0 auto；意思就是上下没有边距，左右水平居中。 二、文字居中\
用法：text-align：center；
这个属性是设置在块元素上的，用来控制块元素内部文本或者图片水平居中。
我们写一个例子：
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style>.box{ width: 500px; height: 500px; margin: 0 auto; text-align: center; font-size: 24px; font-weight: 700; color: blueviolet; background-color: aqua; } </style></head><body> <div class="box"> 欢迎关注她的码农 </div></body></html>
text-align：center；意思是文本的排列形式是居中。 三、固定高度垂直居中\
这个我们可以用定位或者是外边距，一个块元素嵌套一个块元素，设置了父元素的高度，那么我们用外边距让他向下走，实现垂直居中，也可以用绝对定位让他距顶部50%，top:50%;
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style>.box{ width: 500px; height: 500px; background-color: aqua; margin: 0 auto; position: relative; } .box1{ width: 100px; height: 100px; background-color: red; position: absolute; margin-top: 200px; } </style></head><body> <div class="box"> <div class="box1"></div> </div></body></html>
四、文字垂直居中
用法：这里主要是使用行内元素高度=行高，可以使文字垂直居中。
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style>.box{ width: 500px; height: 500px; line-height: 500px; text-align: center; background-color: aqua; color: darkgreen; font-size: 24px; font-weight: 700; margin: 0</style></head><body> <div class="box"> 欢迎关注她的码农 </div></body></html>
五、块状元素水平垂直居中\
用法：通过外边距将块移动到正中间
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style>.box{ width: 500px; height: 500px; background-color: aqua; position: relative; margin: 0 auto; } .box .box1{ width: 100px; height: 100px; background-color: blueviolet; position: absolute; margin-top: 200px; margin-left: 200px; } </style></head><body> <div class="box"> <div class="box1"></div> </div></body></html>
今天更新的比较简单，大家理解就行，明天我们写一下弹性布局。希望大家可以关注我，我现在是从web入门开始讲起，期待和大家一起从小白变成小牛。如果文章中有哪些错误或者不足的地方，还希望大佬指出，我会及时更新。 最后认识一下吧，我叫吕恣瑞，分享web开发知识以及学习经验，关注我，你可以有质的飞跃。\
#微信公众号：她的码农
