css水平、垂直居中常用的几种方式
行内元素水平、垂直居中方法一(不设置居中元素宽高)，代码如下： 运用display: table;display:table-cell；vertical-align:middle;属性<!--html代码如下：-->
<div class="panel-body line-align-center-one-content">
<div class="line-align-center-one">
<span class="mark-item">
这儿是测试的内容 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公斤round: #ccc;
color: #fff;
}
这儿重点是运用text-align:center;是元素水平居中 方法二：运用绝对定位+位移(不设置居中元素宽高)，代码如下：<!--html代码段如下-->
<div class="line-align-center-two">
<span class="mark-two">
这儿是一个行内元素 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公斤round: #ccc;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) ;
}
方法三（不设置居中元素宽高）：运用相对定位+位移+text-align: center;代码如下：<-- html代码段如下-->
<div class="line-align-center-three">
<span class="mark-three"
| 
发表于 2024-6-30 05:47:24