css水平、垂直居中的办法
<h2 style="color: black; text-align: left; margin-bottom: 10px;">css水平、垂直居中常用的几种方式</h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">行内元素水平、垂直居中</h2><span style="color: black;">方法</span>一(不设置居中元素宽高)，代码如下： <span style="color: black;">运用</span>display: table;display:table-cell；vertical-align:middle;属性<div style="color: black; text-align: left; margin-bottom: 10px;"><!--html代码如下：-->
<div class="panel-body line-align-center-one-content">
<div class="line-align-center-one">
<span class="mark-item">
<span style="color: black;">这儿</span>是测试的内容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae earum nobis unde vel. Ab accusantium distinctio ex ipsa necessitatibus. Dolorum facere impedit laudantium magni minima molestiae, nam quidem soluta veniam.
</span>
</div>
</div>
/*css代码段*/
.line-align-center-one-content{
display: table;
width: 100%;
}
.line-align-center-one{
height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid #e4393c;
text-align: center;
}
.mark-item{
bac<span style="color: black;">公斤</span>round: #ccc;
color: #fff;
}
</div>
<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>text-align:center;是元素水平居中</p><span style="color: black;">方法</span>二：<span style="color: black;">运用</span>绝对定位+位移(不设置居中元素宽高)，代码如下：<div style="color: black; text-align: left; margin-bottom: 10px;"><!--html代码段如下-->
<div class="line-align-center-two">
<span class="mark-two">
<span style="color: black;">这儿</span>是一个行内元素 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam exercitationem pariatur recusandae voluptate. Amet, animi architecto commodi cumque distinctio, dolorum eaque laborum modi molestiae mollitia nesciunt perferendis rem tenetur voluptate!
</span>
</div>
/*css代码段如下*/
.line-align-center-two{
position: relative;
height: 400px;
border: 1px solid #e4393c;
}
.mark-two{
bac<span style="color: black;">公斤</span>round: #ccc;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) ;
}
</div><span style="color: black;">方法</span>三（不设置居中元素宽高）：<span style="color: black;">运用</span>相对定位+位移+text-align: center;代码如下：<div style="color: black; text-align: left; margin-bottom: 10px;"><-- html代码段如下-->
<div class="line-align-center-three">
<span class="mark-three"</div>
楼主节操掉了，还不快捡起来！
页:
[1]