css中的居中問題
行內內容的居中
如何讓一個容器的行內內容（文字和行內元素–inline/inlineblock）居中（當然inline-block比較特殊，即有行內屬性，又有塊級屬性）。有以下方法：
- text-align:center水平居中。在塊級父級元素上設定text-align:center，其內部的inline或inline-block的子元素以及文字內容會在父元素內居中。
- line-height垂直居中。line-height設定了行間的距離（行高），將要居中的元素的line-heigth值設定為和其塊級父元素的height值一樣時，其內部內容會垂直居中。
注意:
line-height不能使用負值。
在塊級元素使用line-height是定義該元素基線之間的最小距離而不是最大距離。 - vertical-align:middle垂直居中。
行內元素inline/linline-block/inline-table內部內容的居中,使用偽元素。父級{
display:inline-block;
vertical-align: middle;
}
父級::before//或者::after
{ content: '';
display: inline-block;
height: 100%;
display:inline-block;
vertical-align: middle;
}
注意：設定為middle也不一定是真正的對齊，某些字型的中線位置不一定頂部和底部的正中間。
提一下：
inline水平的元素margin/padding設定僅在左右方向上有效。
<style>
*{
margin:0;
padding:0;
}
p{
width:100px;
height:100px;
background: yellow;
}
span{
margin:30px 30px;
}
</style>
<body>
<p class='one'></p>
<span>sdfasd</span>
</body>
塊級元素居中
block、list-item、inline-block等元素如何在其父元素中居中。
margin/padding值設定居中。
clac計算數值。margin值為=父容器寬/高的50%-自身寬/高的50%：
居中元素{
width: 20rem;
height: 20rem;
margin-left:calc(50% - 10rem);
margin-top:calc(50% - 10rem); }margin:0 auto左右居中。要居中的塊級元素（block）元素設定margin:0 auto 。想知道margin：auto不能垂直居中的原因就懟這裡
注意：對浮動元素（float）、絕對定位（absolute）和固定定位（fixed）的元素無效 。position:absolute居中。此方法不推薦使用，故不詳細解釋，想了解的自行查詢吧！
偏移量50%+負margin值。設定50%的水平和垂直偏移，然後設定的margin-top和margin-left值是要居中元素自身寬/高的一半的負數 。
父級{ position: relative;}
居中元素{
position: absolute;
height: 100px;
width:100px;
top: 50%;
left:50%;
margin-top:-50px;
margin-left:-50px;}偏移量50%+負50%translate值。
父級{ position: relative;}
居中元素 {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);}flex彈性佈局居中。父元素設定為彈性盒子（容器），子元素就成為了彈性元素，利用flex相關屬性進行居中。
父級{
display:flex; /*使用flex盒子*/
justify-content:center;/*水平軸上居中*/
align-items:center;/*垂直軸上居中*/}
父元素設定為彈性容器display:flex，子元素設定magrin:auto ：.父級{
display:flex;
}
.居中元素{
margin: auto;
}
注意：- 如果有多個彈性子元素，預設情況下彈性子元素會成一橫排分佈在父元素容器中。
- flex預設將子元素水平排列到一行（flex-direction:row），使用flex-direction:column可以使子元素垂直排成一列。
- flex預設子元素不折行顯示（flex-wrap: nowrap ），使用flex-wrap: wrap可使子元素自動折行顯示（當一行寬/高度不足容下多個子元素時折行為多行/列）。