css垂直居中的方法

css设置水平居中

1.脱离文档流的方法（使用float，absolute定位、fixed定位）

 #exa{

            height: 100px;

            width: 100px;

            border: 1px black solid;

            position: absolute;

            top: 0px;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

        }
/* 相当于让margin铺满整个父级元素，再用margin：auto自动居中 */
 #exa{
            height: 100px;
            width: 100px;
            border: 1px black solid;
            position: absolute;
            top: 50%;
            left: 50%;

            margin-top: -50px;
            margin-left: -50px;
        }
/* 首先用top:50%和left:50%让exa的坐标原点（左上角）移动到container的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。 */

居中元素的宽高未知 使用transform-translate

div {
        width: 300px;
    height: 300px;
    background:#ddd;
    position: relative;
        }
        
        span {
            width: 100px;
    height: 50px;
    background:green;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50% , -50%);  /*位移上左下右*/
        }  /*块状元素中的文字超出长度，会越过该块状元素*/

 

2.未脱离文档流

1 居中元素的宽高未知 使用table-cell

div {
            border: 3px solid #555;
            width: 300px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        span {
            vertical-align: middle;
        }

/* 在父级元素内 使用vertical-align */
<div id="exa">
        <span>sgvdabrebjebeabomaebcnfgnmxgfm
            xfgm,xgfm,xgcbfnzdfnfdf,mxgfoe</span>
        <!--span元素内换行会显示在文档里-->
    </div>

2  居中元素的宽高未知，使用flex布局实现   可以使文字居中

div {
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
            display: flex;
            text-align: center;
        }

        span {
            align-self: center;
        }
        /* 在父级元素内 使用displayL:flex   子元素使用align-self：center 如果span内文字不够长不会水平居中*/

3 居中元素的宽高未知 使用伪元素：before   无法使文字居中

div {
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
            display: block;
            text-align: center;
        }
        div::before{
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
        span {
            display: inline-block;
            width: 50%;
            height: 50%;
            vertical-align: middle;
            background-color: black;
        }

4文本居中时，使line-height等于父级元素的height即可。