<html lang="en">
<head>
<meta charset="UTF-8">
<title>几种居中对齐的方式</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;
/*使用时将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，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
</td>
</table>
<h2>2.用div伪装成table</h2>
<div class="table">
<div class="td">
<div class="child">由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果</div>
</div>
</div>
<h2>3.用伪元素::before ::after在.child前构建与父元素等高的伪元素</h2>
<div class="parent3">
<div class="child3">
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
</div>
</div>
<h2>4.使用绝对定位top50% left50% margin-top与margin-left为height和weight的一半</h2>
<div class="parent4">
<div class="child4">
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
</div>
</div>
<h2>5.第四种在不知道.child的高度宽度用css3可实现居中</h2>
<div class="parent5">
<div class="child5">
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
</div>
</div>
<h2>6.绝对定位margin auto</h2>
<div class="parent6">
<div class="child6">
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
</div>
</div>
<h2>7.用flex</h2>
<div class="parent7">
<div class="child7">
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
</div>
</div>
<h2>8. .parent高度不知用padding: 10px 0</h2>
<div class="parent8">
<div class="child8">由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。</div>
</div>
</body>
</html>
各种方法的效果
能不写.parent的height就不写 给.child写width与height时注意文本的溢出
网友评论