<!DOCTYPE html>
<html>
<head>
<title>temp</title>
<meta charset="utf-8">
<style type="text/css">
.out{
width: 100%;
background-color: yellow;
height: 100px;
}
.in{
width: 30%;
height: 50px;
background-color: green;
}
.out1{
width: 100%;
background-color: yellow;
height: 150px;
}
.in1{
width: 30%;
height: 100px;
background-color: green;
}
.verticle-out1::after, .verticle-in1{
display:inline-block;
vertical-align:middle;
}
.verticle-out1::after{
content:'';
height:100%;
}
</style>
</head>
<body>
<h1 style="text-align: center">水平居中</h1>
<div class="in" style="margin: 0 auto;">块级元素：margin：0 auto；</div>
<hr>
<div class="out" style="text-align: center">
<div class="in" style="display: inline-block;text-align: center">行内元素：父级text-align:center,子级display:inline-block</div>
</div>
<hr>
<p style="color:red;font-size: 14px;">width：fit-content;是将容器收缩至刚好可以包裹住内容，
因此父级的显示宽度会刚好是子级内容平铺后的长度，这里文字溢出是由于设定了子级的宽度</p>
<div class="out" style="margin: 0 auto; width: -webkit-fit-content;width: fit-content;width: -moz-fit-content;">
<div class="in" style="float:left;">子元素浮动，margin：0 auto；width：fit-content;(注：目前仅适用于chrome和Firefox)</div>
</div>
<hr>
<p style="color:red;font-size: 14px;">父元素设置：display：flex;justify-content:center;同时此设置对div中的文字有效，可使文字居中</p>
<div class="out" style="display: flex;justify-content:center;">
<div class="in" style="display: flex;justify-content:center;">flex</div>
</div>
<hr>
<p style="color:red;font-size: 14px;">比较常见的绝对定位方法,display:absolute;margin-left:容器宽度一半的负值，可百分比</p>
<div class="out" style="">
<div class="in" style="position: absolute;left: 50%;margin-left: -15%;">绝对定位+margin-left:-XX;</div>
</div>
<hr>
<p style="color:red;font-size: 14px;">利用css3新属性：transform:translate(-50%,0);基本思路类似于绝对定位,<span style="color: blue;">但可忽略容器宽度的变化</span></p>
<div class="out" style="">
<div class="in" style="position: absolute;left: 50%;transform: translate(-50%,0);">绝对定位+transform:translate(50%,0);</div>
</div>
<hr>
<p style="color:red;font-size: 14px;">绝对定位方式，position:absolute;left:0;right:0;margin: 0 auto;</p>
<div class="out" style="">
<div class="in" style="position:absolute;left:0;right:0;margin: 0 auto;">绝对定位+left、right:0;margin: 0 auto;</div>
</div>
<hr>
<h1>垂直居中</h1>
<div class="in1" style="line-height: 50px;">元素为单行文本，设置元素的行高为父级高度</div>
<hr>
<div class="out1 verticle-out1">
<div class="in1 verticle-in1">元素为块级元素，基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.流行做法，适应ie7</div>
</div>
<hr>
<div class="out1" style="display: table;">
<div class="in1" style="display: table-cell;vertical-align: middle;">用vertical-align:middle;
其父元素需要为th或td才会生效,但根据效果会发现子元素设置的宽高失效，撑满父元素</div>
</div>
<hr>
<div class="out1" style="display: flex;align-items: center;">
<div class="in1" style="">2012flex,对父级display:flex;align-items:center;</div>
</div>
<hr>
<div class="out1" style="position: relative;">
<div class="in1" style="position: absolute;top: 50%;transform:-webkit-translate(0,-50%);
transform:-ms-translate(0,-50%);transform:translate(0,-50%);">绝对定位+transform:translate（百分比是以自身宽高为基准）</div>
</div>
<hr>
<div class="out1" style="position: relative;">
<div class="in1" style="position: absolute;top: 50%;margin-top: -50px;">绝对定位+margin-top:50%;（百分比是以自身宽度为基准）</div>
</div>
<hr>
<div class="out1" style="position: relative;">
<div class="in1" style="position: absolute;top:0;bottom:0;margin: auto 0;">绝对定位+margin:auto 0;</div>
</div>
<hr>
</body>
</html>显示效果：
865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
