前端代码，布局，元素 水平垂直居中的方法大全

在编写前端页面的时候，要对元素进行布局，设置对齐方式，通常要水平对齐，垂直对齐，这篇文章介绍的是：让元素，水平垂直都居中的所有方法~~~~~~~~~~~~~~~~~~~~~~~~~~~~

工具/原料

编辑器：vscode

原始没有对齐的样式

1、<style> .parent { width: 500px; height: 500px; } .child { margin-bottom: 10px; width: 100px; height: 100px; }</style><div class="parent" style="border:1px solid red;"> <div class="child" style="border:1px solid blue;">水平垂直居中</div> <div class="child" style="border:1px solid black;">水平垂直居中</div></div>

所有对齐方式

1、一、text-align 水平居中对齐text-align 对齐，只是元素中的文本对于元素的对齐方式， 它可以被继承，在下图中可以看到，给 parent 设置了 text-align ：center，它继承给了 child 元素，只是文本：水平垂直居中child 元素无法在parent 中居中

2、二、vertical-align: middle 垂直居中对齐 这是垂直上的对齐方式，但是有的时候你设置会没有效果。 是因为这个样式不对么？不是，是因为你没有设置正确， vertical-align: 只对，table-cell 的元素有作用这个方式会存在一些问题，需要注意，

3、三、line-height = height 垂直居中对齐这个是垂直方向想的对齐，但是只能在子元素只有一个的时候生效，当子元素存在多个的时候无效。注意：对一个有多个子元素的元素使用这个方法将会发生错误。

4、四、margin +position 水平垂直对齐前面的都是 文本的对齐方式，这里对文本框做的对齐方式使用margin 可以做到水平垂直对齐margin：10px auto; 水平居中垂直方向上的居中，还需要使用搭配 position注意：position ：absolute，脱离文档流，塌陷的问题需要解决

5、五、display: flex; 盒子模型水平垂直对齐felx 盒子模型，是必须会的，这个做响应式布局很好。这个是也是布局中知识点比较多的一个属性。学会这个前端页面做起来将会简单很多。