使用CSS完美实现垂直水平居中的6种方法介绍

前言

由于HTML语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多，但是都不太完整，所以小茄今天就来总结下纯CSS实现居中的各种方案。学疏才浅，文中如有不当之处，万望指出！

6种方案

1、绝对定位+margin：auto

<style type="text/css">

    .wrp {

        background-color: #b9b9b9;

        width: 240px;

        height: 160px;

    }

    .box {

        color: white;

        background-color: #3e8e41;

        width: 200px;

        height: 120px;

        overflow: auto;

    }

    .wrp1 { position: relative; }

    .box1 {

        margin: auto;

        position: absolute;

        left: 0; right: 0; top: 0; bottom: 0;

    }

</style>

<p class="wrp wrp1">

    <p class="box box1">

        <h3>完全居中层1：</h3>

        <h3>开发工具