css 的规律摸索之路（二）css之居中问题（垂直居中与水平居中）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nongshuqiner/article/details/72510397

通过上篇css 的规律摸索之路（一）css之三角形的规律及变化，我们已经知道css三角形是怎么回事，现在我们来看看另外一个，常见的应用：css之居中问题（垂直居中与水平居中）

垂直居中

单行文本垂直居中

首先，说说最简单的常见居中方式-单行文本垂直居中：

<div class="single_line_text_box">
    <div class="single_line_text">单行文本垂直居中</div>
    <!-- <img src="" alt="" class="single_line_text"> -->
</div>
<style>
    .single_line_text_box {
        height: 100px; width: 100%; background: #333; line-height: 100px; text-align: center;
    }
    .single_line_text {
        vertical-align: middle; position: relative;
    }
</style>

这方式很简单，我们常用来做单行文本的垂直居中，它的用处也只限与垂直居中包含文本的容器和图片，并且宽高不能设定不然无法居中。

说明：通过父容器设定line-height，以及子元素设定vertical-align: middle;来实现，其中子元素垂直居中不能设定宽度和高度,子元素的内容必须为文本或图片,且文字尽量不能换行不然会溢出

display:table的方式

下来就是display:table的方式，这是一种借助表格样式的居中方式：

<div class="table_parent">
        <div class="table_child">说明：通过父容器设定display: table;，以及子元素设定display: table-cell; vertical-align: middle;来实现，其中子元素设定的高度宽度无效，子元素的内容任意,内容为文字时自动换行照样居中</div>
</div><br>
<div class="table_parent">
       <div class="table_child"><div class="table_child_content">display:table的方式</div></div>
 </div>
 <style>
        .table_parent {
            display: table; height: 100px; width: 100%; background: #eee; text-align: center;
        }
        .table_child {
            display: table-cell; vertical-align: middle;
        }
        .table_child_content {
            height: 20px; width: 500px; background: #aaa; display: inline-block;
        }
 </style>

这种方式的垂直居中效果如图：

说明：这种方式通过父容器设定display: table;，以及子元素设定display: table-cell; vertical-align: middle;来实现，其中子元素设定的高度宽度无效，子元素的内容任意,内容为文字时自动换行照样居中

绝对定位居中

绝对定位居中的方式，这是一种借助绝对定位和外边距的居中方式：

<div class="absolute_locating_parent">
        <div class="absolute_locating_child">绝对定位居中</div>
    </div>
    <style>
        .absolute_locating_parent {
            height: 100px; width: 100%; position: relative; background: #eee;
        }
        .absolute_locating_child {
            margin: auto; position: absolute; width: 100px; height: 50px; background: #aaa;
            top: 0; left: 0; bottom: 0; right: 0;
        }
    </style>

这种方式的垂直居中效果如图：

说明：通过父容器设定position: relative;，子元素设定margin: auto; position: absolute;top: 0; left: 0; bottom: 0; right: 0;来实现，其中子元素必须固定宽高，子元素的内容任意。其中绝对定位居中支持跨浏览器，包括IE8-IE10，不论是否设置padding都可居中（在不使用box-sizing属性的前提下），完美支持图片居中。但是.必须声明高度以及设置overflow:auto来防止内容越界溢出，在Windows Phone设备上不起作用。

弹性盒居中对齐

通过弹性盒来实现居中对齐，本人推荐的居中方式，但是注意兼容性。

<div class="elastic_box_centering">
        <div class="iconloader">
            <!-- <div class="iconloader_child"></div> -->
            Loader...
        </div>
    </div>
    <style>
        .elastic_box_centering {
            display: flex;
            align-items: center; /*定义元素垂直居中*/
            justify-content: center; /*定义容器里的元素水平居中*/
            width: 100%; height: 300px;
            background: #eee;
        }
        .iconloader {
            background: #aaa;
        }
        /*.iconloader_child {
            width: 50px; height: 50px;
        }*/
    </style>

这种方式的垂直居中效果如图：

说明：通过弹性魔盒来实现居中，这种方式特别优雅只需要给父元素添加就可以，不论你子元素是什么样子都居中

绝对定位和负margin

通过padding等份自填充来实现居中对齐的假象，除非特殊环境不然尽量不要使用这种居中方式。

div class="absolute_locating_margin">
    <div class="absolute_locating_margin_child">绝对定位和负margin</div>
</div>
<style>
    .absolute_locating_margin {
        height: 100px; width: 100%; background: #eee; position: relative;
    }
    .absolute_locating_margin_child {
        position: absolute; top: 50%; left: 50%;
        height: 50px; width: 180px; margin: -25px 0 0 -90px;
        background: #999;
    }
</style>

这种方式的垂直居中效果如图：

说明：这种方式是通过定位然后利用margin弥补定位来实现的居中，其子元素的宽度和高度必须固定

padding居中假象

通过padding等份自填充来实现居中对齐的假象，除非特殊环境不然尽量不要使用这种居中方式。

<div class="padding_center">
    <div class="padding_center_child">padding居中</div>
</div>
<style>
    .padding_center {
        padding: 5% 0; width: 100%; background: #eee;
    }
    .padding_center_child {
        text-align: center; background: #999; color: #fff; padding: 10% 0;
    }
</style>

这种方式的垂直居中效果如图：

说明：这种方式是通过padding填充来实现的假象，其父元素和子元素的高度是未知，由浏览器自由定义

到此垂直居中基本赘述完毕，其实还有几种但是个人觉得有些无脑加胡闹

水平居中

text-align内容居中

我们常用这种方式来进行居中，对于需要居中的都得是行内元素或内联块元素。

<div class="center">
    <div class="center_child">内容居中</div>
</div>
<style>
    .center {
        height: 500px; width: 100%; background: #eee;  text-align: center;
    }
    .center_child {
       display: inline-block; width: 70px; height: 70px; background: #999; 
    }
</style>

margin: 0 auto;

对于这个大家一定很熟悉，很常用。

<div class="margin_center">
    <div class="margin_center_child">内容居中</div>
</div>
<style>
    .margin_center {
        height: 500px; width: 100%; background: #eee;
    }
    .margin_center_child {
       width: 70px; height: 70px; background: #999; margin: 0 auto;
    }
</style>

说明：margin: 0 auto;这种居中方式特别适合宽和高固定的，但是不知道宽的他就解决不了了，于是下面的孕育而生

table+margin

对于这个大家就不一定很熟悉，其实很简单，给子元素加上display: table;这句话就可以了

<div class="table_margin_center">
    <div class="table_margin_center_child">table_margin_center居中</div>
</div>
<style>
    .table_margin_center {
        height: 500px; width: 100%; background: #eee;
    }
    .table_margin_center_child {
        background: #999; display: table; margin: 0 auto;
    }
</style>

小结

到此常见的居中方式就完毕了，我们可以对与两个进行配合应用。

提示：后面还有精彩敬请期待，请大家关注我的CSDN博文：侬姝沁儿，或者我的简书专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。