css各种元素的居中

居中

定宽块级元素居中

		body {
            margin: 0;
        }

        .box {
            background-color: pink;
            color: #fff; 
            width: 800px;
			/* 块级元素居中，需要规定宽度 */
            margin: auto;
        }

    <div class="box">
        好多文字
        好多文字
    </div>

文字居中

		.box {
            background-color: pink;
            color: #fff; 
            width: 800px;
            height: 50px;
            /* 文字水平居中 */
			text-align: center;
			/* 行高设定和元素高度一致，文字就能垂直方向居中 */
            line-height: 50px;
        }

图片居中

	<div class="img-box">
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1586178555&di=5a9885a8e06189e22c0832640c560850&src=http://pics1.baidu.com/feed/d31b0ef41bd5ad6e4bf1639e38b66cddb6fd3c39.jpeg?token=170499cd260b462a866e29ddac59835b&s=ED32229F5443FAE7169D09CD030050A0"
            alt="">
    </div>

		body {
            margin: 0;
        }

        .img-box {
            margin: auto;
            width: 800px;
            height: 600px;
            border: 1px solid #000;
             /* 图片是行内块元素，使用这个能水平居中 */
            text-align: center;
        }
			
        .img-box::before {
        	/* 伪元素必须加content*/
            content: '';
             /* 转换成行内块盒子 */
            display: inline-block;
             /* 撑满父盒子 */
            height: 100%;
            /* 这个属性需要两个行内块元素形成对照，才能使图片垂直居中 */
            vertical-align: middle;
        }

        .img-box img {
            vertical-align: middle;
        }

定宽定高子盒子，在父盒子中居中

	<div class="father">
        <div class="son">

        </div>
    </div>

		body {
            margin: 0;
        }

        .father {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            /* 父元素使用相对定位 */
            position: relative;
            margin: auto;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            color: #fff;
            /* 子元素使用决定定位 */
            position: absolute;
            /* 把上下左右都设为0 ，
                注意当没有宽时候，
                left:0,right:0 宽度会拉满整个父盒子
                同理当没有高时候一样    
            */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            /* 居中 */
            margin: auto;

            /* 当只需要水平居中时，设定定宽，left:0,right:0,margin:0 auto 
                垂直居中类似
            */
        }

不定宽不定高子盒子，在父盒子中居中

	<div class="father">
        <div class="son">

        </div>
    </div>

		body {
            margin: 0;
        }

        .father {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            /* 父元素使用相对定位 */
            position: relative;
            margin: auto;
        }

        .son {
            background-color: pink;
            color: #fff;
            /* 子元素使用决定定位 */
            position: absolute;
            /* top:百分比是参照父元素的高 */
            top: 50%;
            /* top:百分比是参照子元素的宽 */
            left: 50%;
        }

.son {
            background-color: pink;
            color: #fff;
            /* 子元素使用决定定位 */
            position: absolute;
            /* top:百分比是参照父元素的高 */
            top: 50%;
            /* top:百分比是参照子元素的宽 */
            left: 50%;
			 /* translateX/Y 百分比是参照自身的宽高 */
            transform: translateX(-50%) translateY(-50%);
            /* 可以简写如下 */
            /* transform: translate(-50%, -50%); */
			
			/* 总体思路如下
                1.先使用定位的top，left百分比 把子元素放在父元素一半的位置上
                2.利用translate参照本身宽高的特征，把子元素挪动自身的一半
             */
        }