<html lang="en">
<head>
<meta charset="UTF-8">
<title>幾種居中對(duì)齊的方式</title>
<style>
/*第一種*/
.parent1 {
border: 1px solid red;
height: 500px;
}
.parent1 .child1 {
border: 5px solid red;
}
/*第二種*/
.table{
display: table;
border: 1px solid red;
height: 500px;
}
.td {
display: table-cell;
border: 3px solid blue;
vertical-align: middle;
}
.table .child {
border: 1px solid red;
}
/*第三種*/
.parent3 {
border: 3px solid red;
height: 500px;
text-align: center;
}
.child3 {
border: 3px solid black;
display: inline-block;
width: 300px;
vertical-align: middle;
}
.parent3::before {
content:'';
border: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
/*使用時(shí)將border邊框去掉*/
}
.parent3::after {
content:'';
border: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
/*第四種*/
.parent4 {
height: 500px;
border: 1px solid red;
position: relative;
}
.child4 {
border: 1px solid red;
width: 300px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -50px;
}
/*第五種*/
.parent5 {
height: 500px;
border: 1px solid red;
position: relative;
}
.child5 {
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*第六種*/
.parent6 {
height: 500px;
border: 1px solid red;
position: relative;
}
.child6 {
border: 1px solid green;
position: absolute;
width: 300px;
height: 200px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/*第七種*/
.parent7 {
height: 500px;
border: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child7 {
border: 3px solid green;
width: 300px;
}
/*第八種*/
.parent8 {
border: 3px solid red;
}
.child8 {
/*width: 400px;*/
margin: 100px auto;
padding: 100px 0;
border: 3px solid red;
}
</style>
</head>
<body>
<h2>1.table自帶的居中</h2>
<table class="parent1">
<td class="child1">
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
</td>
</table>
<h2>2.用div偽裝成table</h2>
<div class="table">
<div class="td">
<div class="child">由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果</div>
</div>
</div>
<h2>3.用偽元素::before ::after在.child前構(gòu)建與父元素等高的偽元素</h2>
<div class="parent3">
<div class="child3">
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
</div>
</div>
<h2>4.使用絕對(duì)定位top50% left50% margin-top與margin-left為height和weight的一半</h2>
<div class="parent4">
<div class="child4">
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
</div>
</div>
<h2>5.第四種在不知道.child的高度寬度用css3可實(shí)現(xiàn)居中</h2>
<div class="parent5">
<div class="child5">
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
</div>
</div>
<h2>6.絕對(duì)定位margin auto</h2>
<div class="parent6">
<div class="child6">
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
</div>
</div>
<h2>7.用flex</h2>
<div class="parent7">
<div class="child7">
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
</div>
</div>
<h2>8. .parent高度不知用padding: 10px 0</h2>
<div class="parent8">
<div class="child8">由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。</div>
</div>
</body>
</html>
各種方法的效果
能不寫.parent的height就不寫 給.child寫width與height時(shí)注意文本的溢出
