|
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-contentCSS3新特性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 |
|
公众号
