sunshine
管理员
管理员
  • 最后登录2023-10-30
  • 发帖数170
  • 社区居民
阅读:5600回复:0

[css]5种方式实现CSS元素水平居中,实用又简单!

楼主#
更多 发布于:2018-11-19 11:51
1.常规方法 - 定宽元素
html部分:
<div class="container">
    <div class="center"></div>
</container>
CSS部分:
/*公用*/
body,div{
    margin: 0;
}
.container{
    background: beige;
    height: 1000px;
}
/*居中*/
.center{
    width:300px;
    height:300px;
    margin:auto;
    background: aqua;
}

此方法缺点:内层元素必须设定(固定)宽度

2.不定宽元素 - 设置行内块

然而很多时候,我们并不知道需要居中元素的宽度,或者其宽度是随后台数据变化的。

下文开始,我们以“分页效果”为例,诠释“不固定宽度”的元素如何设置水平居中:

html部分(外层div.container略):
<div class="pages">
        <li><</li>
        <li>1</li>
    <li>2</li>
    <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>></li>
</div>
CSS部分(前文公用部分略):
/*分页公用*/
li{
        list-style-type: none;
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        background: black;
        color: #fff;
        border-radius: 3px;
        cursor: pointer;
}
li:hover{
        background: darkorange;
}
/*设置行内块*/
.pages{
        margin-top: 20px;
        text-align: center;
}
.pages li{
        display: inline-block;
}

此方法缺点:需要解决inline-block带来的默认间距(浏览器自动设置)

3.不定宽元素 - 设置浮动

用浮动的办法,即可避开浏览器带来的inline-block默认间距
思路:
1.外层相对定位,内层相对定位
2.外层左浮动,内层左浮动
3.外层右移50%,内层左移50%

html部分不变,为避免重复class改为pages2,后文同理
CSS部分:
.pages2{
        position: relative;
        float: left;        //外层左浮 -> 内层宽度刚好撑开外层容器
        left: 50%;  //外层右移50%
}
.pages2 li{
        float: left;
        position: relative;
        right: 50%; //内层左移50%
}
.pages2 li:not(:first-child){
        margin-left:5px;
}

注:外层元素一旦设置float属性,内层将自动刚好撑开外层宽度,等同于为外层设置display: inline-block;

4.不定宽元素 - 绝对定位
思路:
1.外层绝对定位,内层相对定位,外层的外层相对定位
 2.外层左浮动,内层左浮动
3.外层右移50%,内层左移50%
CSS部分:
.container{
        position: relative;     //外层的外层相对定位
}
.pages3{
        position: absolute; //外层绝对定位
        float: left;
        left: 50%;
}
.pages3 li{
        float: left;
        position: relative;     //内层相对定位
        right: 50%;
}
.pages3 li:not(:first-child){
        margin-left:5px;
}
5.CSS新特性 - fit-content
CSS3新特性width: fit-content,只需配合margin: auto,即可巧妙将元素水平居中
(fit-content目前仅支持谷歌和火狐浏览器,但非常适合移动端开发!)
.pages4{
        width: fit-content;
        width:-moz-fit-content;
        margin:auto;
}
.pages4 li{
        float: left;
}
.pages4 li:not(:first-child){
        margin-left:5px;
}
转自:https://blog.csdn.net/Simon9124/article/details/78935788
游客


返回顶部

公众号

公众号