css学习之路（1）-居中的几种办法
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、css的居中方式-垂直对齐：</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;">.verticalcenter{
position:relative;
top:50%;
transform:translateY(-50%);
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ps:这种方式的垂直对齐<span style="color: black;">重点</span>应用在块状元素中，缺点是<span style="color: black;">外边</span>容器<span style="color: black;">必须</span>设置height，有兼容性的问题，但写了前缀绝大部分的浏览器都<span style="color: black;">能够</span>兼容，除了IE那几个。。。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">那样</span><span style="color: black;">针对</span>垂直居中的<span style="color: black;">办法</span>最简单的则是设置高度：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.spancenter{
height:40px;
line-height:40px;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点:只能用在一行中并<span style="color: black;">不可</span>多行垂直对齐</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2、水平对齐</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;">div{
text-align:center;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ps:适用于文本的对齐方式</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">div{
margin: 0 auto;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ps:块元素最常用的居中方式</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">table-cell居中 ，表格布局中所有东西都是居中的</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="center-align">
<div class="center-core">
<img src=""/>
</div>
</div>
.center-align {
display: table;
bac<span style="color: black;">公斤</span>round: hsl(120, 100%, 97%);
width: 100%;
}
.center-core {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.center-core img {
width: 33%;
height: auto;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">PS：这种方式虽然<span style="color: black;">必须</span>额外的包裹一个<span style="color: black;">外边</span>容器，<span style="color: black;">外边</span>容器<span style="color: black;">必须</span>设置高度，但兼容性极好。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>absolute定位居中，这种方式兼容所有的浏览器。缺点<span style="color: black;">便是</span><span style="color: black;">必要</span>显式的声明<span style="color: black;">外边</span>容器的高度：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.absolute-aligned {
position: relative;
min-height: 500px;
bac<span style="color: black;">公斤</span>round: hsl(200, 100%, 97%);}
.absolute-aligned img {
width: 50%;
min-width: 200px;
height: auto;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;}</div>
你的努力一定会被看见，相信自己，加油。 祝福你、祝你幸福、早日实现等。 可以发布外链的网站 http://www.fok120.com/ 论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。 系统提示我验证码错误1500次 ＼~゛， 回顾历史，我们不难发现：无数先辈用鲜血和生命铺就了中华民族复兴的康庄大道。 回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。
页:
[1]