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

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

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值