CSS-居中
一. 水平居中
1. 行內(nèi)元素水平居中
使用text-align屬性，對行內(nèi)元素定義居中
<style>
.box {
border: 1px solid red;
text-align: center;
margin: 20px;
}
.box .btn {
margin: 0 10px;
}
.btn {
display: inline-block;
padding: 3px 5px;
background: green;
color: #fff;
border-radius: 3px;
text-decoration: none;
}
</style>
<body>
<div class="box">
hello Nicolas ZHAO SI
</div>
<div class="box">
<a href="" class="btn">點我</a>
<a href="" class="btn">點我</a>
</div>
</body>
2. 塊級元素水平居中
塊級元素默認(rèn)就會獨占橫向的空間，因此一般說的塊級元素的居中，是定義了寬度的前提下。
/*
如下所示： 再塊級元素給定寬度的前提下，設(shè)置左右margin為auto自動即可，
上下marigin隨意
另外由于內(nèi)部有個行內(nèi)塊級元素按鈕，因此設(shè)置text-align行內(nèi)元素居中
*/
.box2 {
border: 1px solid black;
width: 500px;
margin: 0 auto;
text-align: center;
}
<div class="box2">
<a href="" class="btn">點我</a>
</div>
二. 垂直居中
1. 段落文字垂直居中
一般不要把父容器的高度固定死，由里面的內(nèi)容來絕對撐開，這樣可以做到動態(tài)的居中。
/* 只需要給父容器上下設(shè)置固定padding即可 */
<style>
.box {
border: 1px solid red;
text-align: center;
padding: 30px;
}
</style>
<body>
<div class="box">
<h1>Hello fantastic baby!</h1>
<h1>Hello fantastic baby!</h1>
<h1>Hello fantastic baby!</h1>
</div>
</body>
2. 單行文字、按鈕、icon的垂直居中
如下所示，如果對按鈕定義了高度，而沒有指定行高，則可能會導(dǎo)致按鈕文字不會垂直居中，此時，你可以對單行文本設(shè)置行高=高度，從而使容器在任意高度下，內(nèi)部文字都是垂直居中的。
<style>
.box {
border: 1px solid red;
text-align: center;
padding: 20px;
}
.btn {
width: 70px;
height: 50px;
line-height: 50px;
display: inline-block;
border: 1px solid black;
color: #fff;
background: #666;
text-decoration: none;
}
</style>
三. 絕對居中
1. 滿屏
這種居中方式，適合做首頁首屏，是一種全屏的方式，隨著窗口大小的調(diào)整會自適應(yīng)（圖中灰色背景）
<style>
/* 為全屏的容器box以及其上層所有父級元素設(shè)置高度100%，寬度自適應(yīng) */
body,html {
height: 100%;
margin: 0;
}
/*
這里的box容器為了達(dá)到全屏效果，也可以不定義高度為100%，而是采用如下方案，使用絕對定位，同時距離四個邊界距離為0,此法可以用來做屏幕彈框
.box {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
*/
.box {
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.box1 {
width: 300px;
height: 200px;
background: deepskyblue;
border: 1px solid;
text-align: center;
}
</style>
<body>
<div class="box">
<div class="box1">
<h1>hello</h1>
<p>歡迎來到召喚師峽谷</p>
</div>
</div>
</body>
2. 具有固定寬高的容器絕對居中
你一定留意到了，上面實現(xiàn)全屏的例子，還有一個藍(lán)色的容器，擁有一定的寬高，而又不是全屏，該如何居中呢？別著急，往下看：
/* 事實上，你只需要對這個藍(lán)色容器，也使用絕對定位，然后距離左邊50%，距離上邊50%。
但是在定位中用來計算距離的點是容器的左上角，所以還需要分別添加負(fù)margin，其為容器高度的一半，
如果你不理解， 沒關(guān)系，你先試一下就知道為什么了*/
.box1 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
width: 300px;
height: 200px;
background: deepskyblue;
border: 1px solid;
text-align: center;
}
3. 非固定寬高的容器絕對居中
這時候有人問了，如果想要居中的容器，不設(shè)置固定寬高，而是按照需求，由內(nèi)部的元素自由的撐開呢？
問得好！如果沒有了固定寬高，那么你就不能再使用負(fù)margin來做絕對定位后的調(diào)整了，因為你的內(nèi)容是不固定，日后可能是變化的，怎么辦？
這時候你需要學(xué)習(xí)一個CSS3的屬性，叫做transform，使用方法如下：
transform: translate(-50%,-50%);
用這個屬性代替被放棄的負(fù)margin即可，translate()內(nèi)部的兩個屬性值，分別代表水平和垂直方向的位置偏移量，右→，下↓為正，因此transform: translate(-50%,-50%)表示容器向左和向上分別偏移自身寬和高各50%的距離。
4. 偽元素實現(xiàn)非固定寬高的水平垂直居中
這種方法，元素寬高隨意，采用前或后添加偽元素，使用對齊的屬性，然后另偽元素“消失”即可。
<style>
/* 定義父容器固定高度，并且內(nèi)容水平居中 */
.dad {
height: 400px;
border: 1px solid;
text-align: center;
}
/* 定義容器內(nèi)偽元素高度為動態(tài)100%，并且展現(xiàn)方式為行內(nèi)塊級，同時中部垂直對齊 */
.dad::before {
content: '';
height: 100%;
display: inline-block;
border: 1px solid;
vertical-align: middle;
}
/* 前后兩個偽元素一個就可以，這是為了形象演示，加了兩個 */
.dad::after {
content: '';
height: 100%;
display: inline-block;
border: 1px solid;
vertical-align: middle;
}
/* 要居中的元素同樣定義行內(nèi)塊級，并且中部垂直對齊 */
.baby {
display: inline-block;
border: 1px solid red;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="dad">
<div class="baby">我要居中！</div>
</div>
</body>
總結(jié)：
關(guān)于居中方式有十幾種不同的方式，分別有自己的使用場景，選擇適當(dāng)?shù)木又蟹绞胶荜P(guān)鍵，這個一方面看前人總結(jié)的經(jīng)驗，多google幾篇不同作者的文章，對比著看，另一方面只有靠自己在學(xué)習(xí)工作中不斷的摸索總結(jié)，形成自己的經(jīng)驗。
