淺談css中一個元素如何在其父元素居中顯示
- 高洛峰原創
- 2017-02-22 11:46:041692瀏覽
css如何垂直居中一個元素的問題已經是一個老生常談的問題了。不管對新手或老手，在面試過程中是常被問到的。前兩天在看一個flex的影片教程，當中提到了有關元素的居中問題，所以今天小編就來扒一扒幾種常見的方式。缺點請大家批評指正（所有的程式碼都是自己親手敲過可用的）
1、水平居中（margin:0 auto;）
關於這個，大家應該是最不陌生的,不管是在訓練班還是自己自學的話。這個應該是老師講的第一個方法了（水平方向上），但是其有一個前提，就是被包裹的元素不能有浮動的屬性。否則的話這個屬性就會失效。具體如下圖碼：
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
}
item{ margin:0 auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<p class="box">
<p class="item"></p>
</p>
</body>
<br>
2、水平居中（text-align：center;）
這個屬性在沒有浮動的情況下，我們可以將其轉換為inline/inline-block，然後其父元素加上text-align:center;屬性就可以將其居中
#<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red; text-align:center;
}
item{ display:inline/inline-block;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<p class="box">
<p class="item"></p>
</p>
</body>
3、水平垂直居中（一） 子元素相對於父元素絕對定位，並且margin值減去自己寬高的一半
此方法有一定的局限性，因為其必須知道子元素本身的寬高
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100x;
background: green;
}</style><body>
<p class="box">
<p class="item"></p>
</p></body>
4、水平垂直居中（二） 子元素相對於父元素絕對定位，且margin值位auto
此方式不受元素寬高所限制，比較好用（建議使用）
#<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
item{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
width: 100px;
height: 100x;
background: green;
}</style><body>
<p class="box">
<p class="item"></p>
</p></body>
5、水平垂直置中（三） diplay：table-cell
此方式是將元素轉換成表格樣式，再利用表格的樣式來進行居中（建議）
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
}
item{
margin:0 auto;
width: 100px;
height: 100x;
background: green;
}</style><body>
<p class="box">
<p class="item"></p>
</p></body>
#6、水平垂直居中（四） 絕對定位和transfrom
該方法用最能裝逼，用到了css3變形，面試者看到你代碼裡面有這樣的，你的逼格瞬間就上去了，當然了 你知道的，逼格的東西是有相容性問題的
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position:relative;
}
item{
width: 100px;
height: 100x;
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}</style><body>
<p class="box">
<p class="item"></p>
</p></body>
#7、水平垂直居中（五）css3中的flex屬性
這個屬性很好用，但是絕逼有相容性問題的，用者要注意
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
item{
width: 100px;
height: 100x;
background: green;
}</style><body>
<p class="box">
<p class="item"></p>
</p></body>
是不是突然覺得居中的方法好簡單啊！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！
更多淺談css中一個元素如何在其父元素居中顯示 相關文章請關注PHP中文網！