css样式中的居中问题(一)

css样式中的居中问题

1.div中的div水平居中

2.div中的form水平居中

分析原因: form只是一个表单而已，对页面根本就没有布局上的作用.，因此无论怎么设置都是无法居中，但是依旧有办法解决的;

解决办法: 在外面套一层<div style="width:100%;text-align:center"></div>

3.div中的table水平居中

有时候在div中加上<div style="text-align:center"></div>里面的table是不会居中的，
我们可以在table中加上<margin:auto>解决此问题。

4.div中的button水平居中

   解决方法: 在按钮外套一层div, div中使用flex布局

5.div中的label垂直居中

    设置label的行高 line-height 和div的高度—致即可。

6.span标签、p标签水平居中

(1) span、p转换成块元素 display:block ，设置 margin：0 auto
(2) span在div中水平垂直居中

 .el-dialog__title {
    display: inline-block;
    text-align: center;
    line-height: 80px;
  }