【CSS】实现元素水平居中和垂直居中的几种方式和示例

1. 水平居中

1.1 内联元素水平居中
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。

<div class="center-text">
	<p>我是内联元素</p>
</div>

.center-text {
	 text-align: center;
    }

1.2 块级元素水平居中
通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。

<div class="center-block">
	<p>我是内联元素</p>
</div>

.center-block {
	width: 400px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    }

1.3 利用display: inline-block;
如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

<div>
	<div class="align-center">
   		<p>我是内联元素1</p>
    </div>
    <div class="align-center">
    	 <p>我是内联元素2</p>
    </div>
</div>

.align-center {
            width: 200px;
            height: 100px;
            background-color: black;
            color: #cccccc;
            display: inline-block;
        }
div {
	text-align: center;
     }

1.4 利用display: flex
利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

    <div>
        <div class="align-center right-margin">
            <p>我是内联元素1</p>
        </div>
        <div class="align-center">
            <p>我是内联元素2</p>
        </div>
    </div>

        .align-center {
            width: 200px;
            height: 100px;
            background-color: black;
            color: #cccccc;
        }
        .right-margin {
            margin-right: 10px;
        }
        div {
            display: flex;
            justify-content: center;
        }

2. 垂直居中

2.1 单行内联元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

        <div class="align-center right-margin">
            <p>我是内联元素1</p>
        </div>
        <div class="align-center">
            <p>我是内联元素2</p>
        </div>

        .align-center {
            width: 200px;
            height: 100px;
            background-color: black;
            color: #cccccc;
        }
        p {
            height: 100px;
            line-height: 100px;
        }

2.2 内联多行文本垂直居中
2.2.1 利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中。

   <div class="partent">
        <p class="align-center">我有一头小毛驴，我从来也不骑，有一天我心血来潮骑它去赶集，我手里拿着小皮鞭，我心里真得意</p>
   </div>

        .partent {
            display: table;
            width: 400px;
            height: 200px;
            background-color: black;
            color: #cccccc;
        }
        .align-center {
            display: table-cell;
            vertical-align: middle;    
        }

2.2.2 利用flex布局（flex）
利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。

<div class="partent">
	 <p>我有一头小毛驴，我从来也不骑，有一天我心血来潮骑它去赶集，我手里拿着小皮鞭，我心里真得意</p>
</div>

        .partent {
            display: flex;
            width: 400px;
            height: 200px;
            background-color: black;
            color: #cccccc;
            flex-direction: column;
            justify-content: center;
        }

2.3 固定高度的块级元素的垂直居中
过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。（水平居中同理）

    <div class="parent">
        <div class="column-center">
        </div>
    </div>

        .parent {
            width: 400px;
            height: 200px;
            background-color: black;
            position: relative;
        }
        .column-center {
            width: 50px;
            height: 50px;
            background-color: #ccc;
            position: absolute;
            top: 50%;
            margin-top: -25px;
        }

2.4 未知高度的块级元素垂直居中
垂直方向都向反向平移高的一半，从而使元素垂直居中。（水平居中也同理）

    <div class="parent">
        <div class="column-center">我需要撑开这个父级元素
        </div>
    </div>

        .parent {
            width: 400px;
            height: 200px;
            background-color: black;
            position: relative;
        }
        .column-center {
            background-color: #ccc;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

2.5 未知高度的块级元素利用flex布局实现垂直水平居中

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

    <div class="parent">
        <div class="column-center">我需要撑开这个父级元素
        </div>
    </div>

        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            color: #ccc;
            width: 400px;
            height: 200px;
        }