15-1 水平居中設置-行内元素
設置水平居中的場景，比如爲了美觀，文章的標題一般都是水平居中顯示的。
分兩種情況：行内元素還是塊狀元素，塊狀元素裡面又分爲定寬塊狀元素，以及不定寬塊狀元素。
如果被設置元素爲文本、圖片等行内元素時，水平居中是通過給父元素設置text-align:center 來實現的。(父元素和子元素：如下面的html代碼中，div是“我想要在父容器中水平居中顯示”這個文本的父元素。反之這個文本是div的子元素 )
html代碼：
<body> <div>我想要在父容器中水平居中顯示。</div> </body>
css代碼：
<style>
.txtCenter{
text-align:center;
}
</style>15-2 定寬塊狀元素
當被設置元素爲塊狀元素時用text-align：center 不起作用，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
定寬塊狀元素：塊狀元素的寬度width爲固定值。
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值爲“auto”來實現居中的。
設置 div 這個塊狀元素水平居中：
html代碼：
<body> <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div> </body>
css代碼：
<style>
div{
border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}
</style>也可以寫成：
margin-left:auto; margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設置的。
15-3 面試常考題之已知寬高實現盒子水平垂直居中
已知寬高實現盒子水平垂直居中。通常使用定位完成，例如想要實現以下效果：
如下兩個div元素:
<body> <div class="box"> <div class="box1"></div> </div> </body>
要實現子元素相對於父元素垂直水平居中,我們只需要輸入以下代碼：
<style>
.box{
border:1px solid #00ee00;
height:300px;
position:relatiive;/*父元素相對定位*/
}
.box1{
position:asolute;/*子元素絕對定位*/
top:500%;/*top值爲50%*/
left:50%/*left值爲50%*/
margin:-100% 0 0 -100%;/*margin-top的值爲負的高度的一半，margin-left的值爲負的寬度的一半*/
width:200px;
height:200px;
border:1px solid red;
}
</style>技術點的解釋：
1、利用父元素設置相對定位,子元素設置絕對定位,那麽子元素就是相對於父元素定位的特性。
2、子元素設置上和左偏移的值都爲50%，是元素的左上角在父元素中心點的位置。效果：
3、然後再用margin給上和左都給負的自身寬高的一半,就能達到垂直水平居中的效果。
15-4面試常考題之寬高不定實現盒子水平垂直居中
未知寬高實現盒子水平垂直居中，通常使用定位以及translate完成。參考下面例子：
<div> <div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈…… </div> </div>
添加樣式：
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} 
技術點的解釋：
1、利用父元素設置相對定位,子元素設置絕對定位,那麽子元素就是相對於父元素定位的特性。
2、子元素設置上和左偏移的值都爲50%。
3、然後再用css3屬性translate位移,給上和左都位移-50%距離，就能達到垂直水平居中的效果。
