关于水平居中垂直居中的常用方法-原创手记-慕课网

最近看了很多大神的各种关于水平居中和垂直居中的方法。我觉得用自己的话来写一遍可能记忆比较深一点。我记下几个我觉得比较常用的方法。
水平居中
行内元素，给其父元素设置text-align:center,就可以实现行内元素水平居中

<!-- 行内元素水平居中 -->
 <!-- 什么是行内元素?
        1.设置宽高无效
        2.对margin设置左右有效，上下无效；padding都有效
        3.不会自动换行

    行内元素有哪些（常用）
    <span></span>
    <a ></a>
    <img  alt="">
    <input >
    <textarea>
    <b>
-->
<style type="text/css">
    .box {text-align: center;}
</style>
    <div class="box">
        <span>我要居中啦</span></br>
        <b>我也居中啦</b></br>
        <input type="text" name="" value="我是文本框哦">
    </div>

<!-- 块级元素水平居中 -->
 <!-- 什么是块级元素?
        1.设置宽高有效
        2.对margin、padding都有效
        3.自动换行

    块级元素有哪些（常用）
    <div></div>
    <ul></ul><li></li>
    <p></p>
    <h1></h1>...<h6></h6>
    <section></section>
    <header></header>
    ...
-->
<style type="text/css">
    .box1 {width: 200px;height: 100px;background: #f0f0f0;margin: 0 auto;text-align: center;line-height: 100px;}
    p{width: 200px;height: 100px;background: #989898;margin: 0 auto;text-align: center;line-height: 100px;}
</style>
    <div class="box1">我是div </div>  
    <p>我是p标签</p>

垂直居中

<!-- 设置内联元素的行高等于父块高度的行高即可实现垂直居中 -->
<style type="text/css">
    div{width: 300px;height: 50px;}
    p{line-height: 50px;}
</style>
    <div>
        <p>我是垂直居中</p>
    </div>

<!-- 多行行内元素垂直居中 -->
 <!-- 让包裹块模拟表格效果,产生垂直居中效果 -->
<style type="text/css">
    .box{width: 500px;height:300px;display: table-cell;background: #f0f0f0;vertical-align: middle;}

</style>
    <div class="box">
        <span>我是垂直居中</span>
        <span>我是测试文字啦啦啦我是测试文字啦啦啦</span>
        <span>我是垂直居中</span>
        <span>我是测试文字啦啦啦我是测试文字啦啦啦</span>
        <span>我是垂直居中</span>
        <span>我是测试文字啦啦啦我是测试文字啦啦啦我是测试文字啦啦啦</span>
        <span>我是垂直居中</span>
        <span>我是测试文字啦啦啦我是测试文字啦啦啦</span>
    </div>

水平垂直居中

<!-- 垂直居中(已知宽、高度) -->
 <!-- 定位到页面的一半,拉回该元素大小的一半,使其居中 -->
<style type="text/css">
    .box{width: 200px;height:300px;background: #f0f0f0;position: absolute;top:50%;margin-top: -150px;left: 50%;margin-left: -100px;}

</style>
    <div class="box">
        cdfdsfsf 
    </div>

<!-- flex -->

<style type="text/css">
    .box{display: flex;height: 300px;background: #ccc;}
    .box-child{width: 100px;height: 100px;margin: auto;background: #ddd;}
</style>
    <div class="box">
        <div class="box-child">sdfs</div>
    </div>

<!-- transform:translate  未知宽高元素实现水平垂直居中 -->

<style type="text/css">
    .box{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);background: #ccc;}
</style>
    <div class="box">
        因为不知道宽高度,所以主要用translate属性拉回未知元素XY轴上的位置实现居中</br>
        若是单纯实现未知高度的元素居中,只要用到transform:translateY(-50%)即可实现
    </div>

<!-- flex实现页面水平垂直居中 -->

<style type="text/css">
    .box{display: flex;justify-content: center;align-items: center;height: 300px;background: #ccc;}
    .box-child{width:200px;height: 100px;border:1px solid #ddd;}
</style>
    <div class="box">
        <div class="box-child">
            定义居中元素的父元素justify-content和align-items属性为center即可, 
需要设置足够的高度,不然只有水平居中效果
        </div>
    </div>