HTML常用设置【持续更新】

 

水平垂直居中

原文：https://blog.csdn.net/qq_31674679/article/details/81502033

https://blog.csdn.net/liufeifeinanfeng/article/details/78615567

水平：

1. 方法一：在父容器上定义固定宽度，margin值设成auto
2. 在子元素中将display设置为inline-block,父元素text-algin设置为center

 

 

垂直：

       1. table-cell

  <style type="text/css">
        .parent {
            width: 200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;     
        }
        .child {
            /*display: inline-block;*/
            background-color: orangered;
        }
    </style>

 

          2. flex

    <style type="text/css">
        .parent {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content:center;
            align-items:Center;
        }
        .child {
            /*display: inline-block;*/
            background-color: orangered;
        }
    </style>

 

        3. 单行文本设置 line-height