css 居中布局

水平居中

inlink-block text-align

<style>
.parent{
	 100%;
	height: 50px;
	background: red;
	text-align: center;
}
.child{
	display: inline-block;
	background: #ccc;
}
</style>
<div class="parent">
	<div class="child">我相信这么优秀的你，一定会成功的</div>
</div>

table margin

<style>
.parent{
	 100%;
	height: 50px;
	background: red;
}
.child{
	display: table;
	margin: 0 auto;
	background: #ccc;
}
</style>
<div class="parent">
	<div class="child">我相信这么优秀的你，一定会成功的</div>
</div>

### absolute transform ```

我相信这么优秀的你，一定会成功的

``` 

flex margin

<style>
.parent{
	 100%;
	height: 50px;
	background: red;
	display: flex;
}
.child{
	background: #ccc;
	margin: 0 auto;
}
</style>
<div class="parent">
	<div class="child">我相信这么优秀的你，一定会成功的</div>
</div>

flex justify-content

<style>
.parent{
	 100%;
	height: 50px;
	background: red;
	display: flex;
	justify-content: center;
}
.child{
	background: #ccc;
}
</style>
<div class="parent">
	<div class="child">我相信这么优秀的你，一定会成功的</div>
</div>

垂直居中

table-cell vertical-align

<style>
.parent{
	 100px;
	height: 100px;
	background: red;
	display: table-cell;
	vertical-align: middle;
}
.child{
	background: #ccc;
}
</style>
<div class="parent">
	<div class="child">学无止境</div>
</div>

absolute transform

<style>
.parent{
	 100px;
	height: 100px;
	background: red;
	position: relative;
}
.child{
	background: #ccc;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
</style>
<div class="parent">
	<div class="child">学无止境</div>
</div>

### flex align-items ```

学无止境

``` 

水平垂直居中

absolute transform

<style>
.parent{
	 400px;
	height: 100px;
	background: red;
	position: relative;
}
.child{
	background: #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
<div class="parent">
	<div class="child">学无止境</div>
</div>

line-block text-align table-cell vertical-align

<style>
.parent{
	 400px;
	height: 100px;
	background: red;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.child{
	background: #ccc;
	display: inline-block;
}
</style>
<div class="parent">
	<div class="child">学无止境</div>
</div>

flex justify-content align-items

<style>
.parent{
	 400px;
	height: 100px;
	background: red;
	display: flex;
	justify-content: center;
	align-items: center;
}
.child{
	background: #ccc;
}
</style>
<div class="parent">
	<div class="child">学无止境</div>
</div>