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 |
|