css 让元素居中

经常碰到有同学在问,如何让一个元素上下左右都居中呢? 

 

相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参考,如有不足之处,请大家补充

 

问题描述:

 

给定两个元素,这两个元素是父子级关系。

 

并且两个元素的大小都是不确定的,那么这时候如何让子级在父级中上下左右都居中?(暂且设定父级比子级要大一些)

 

第一种:利用定位

 

先上代码及效果:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .content{            width:500px;            height:300px;            border:1px solid #0a3b98;            position: relative;        }        .box{            width:100px;            height:40px;            background: #f0a238;            position: absolute;            top:0;            left:0;            right:0;            bottom:0;            margin:auto;        }</style></head><body> <div class="content">    <div class="box"></div></div> </body></html>

 

 

思路:父级相对定位,子级绝对定位  而四个定位属性的值都设置了0;

 

那么这时候如果子级没有设置宽高,则会被拉开到和父级一样宽高。

 

而现在设置了子级的宽高,所以宽高会按照我们的设置来显示;

 

但是实际上子级的虚拟占位已经撑满了整个父级,这时候再给它一个margin:

 

auto它就可以上下左右都居中了

 

第二种,定位配合css3位移

 

先上代码,效果:​​​​​​​

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .content{            width:500px;            height:300px;            border:1px solid #0a3b98;            position: relative;        }        .box{            width:100px;            height:40px;            background: #f0a238;            position: absolute;            top:50%;            left:50%;            transform: translate(-50%,-50%);        }</style></head><body> <div class="content">    <div class="box"></div></div> </body></html>

 

 

思路:父级相对定位,子级绝对定位,而top,left这两个属性的如果给百分比;

 

那么这个百分比则是相对于父级的宽高来进行计算的;

 

如果只给定这两个值,则子级的右上角会和父级的中心点对齐,得到下图:

 

 

这时候则需要进一步操作:

 

css3中的位移属性,则是根据自身来计算百分比的;

 

所以只需要利用这个属性把自身再往左上角各移动50%就可以让子级在父级中上下左右都居中了

 

利用内联块元素 display:inline-block

 

代码及效果:​​​​​​​

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .content{            width:500px;            height:300px;            border:1px solid #0a3b98;            text-align: center;        }        .content:before{            content: '';            height:100%;            width:0;            display: inline-block;            vertical-align: middle;        }        .box{            width:100px;            height:40px;            background: #f0a238;            display: inline-block;            vertical-align: middle;        }</style></head><body> <div class="content">    <div class="box"></div></div> </body></html>

 

 

思路:

 

首先,把子级转换成内联块元素,那么左右居中就可以直接利用text-align:center搞定了,而这个方法难点就在上下居中上。

 

子级是一个内联块元素,当然不可能说给父级设置一个行高子级就乖乖的上下居中了。

 

所以需要更加复杂的操作:

 

首先给子级设置垂直对齐方式:vartical-align  这个属性只对内联元素以及内联块元素起作用;

 

它有这么些值:top,bottom,middle等等 我想这些值的意思就不需要我解释了。

 

但是这个属性有一个缺点:需要一个参照物,也就是说如果父级里面有两个子元素,两个子元素都设置了vertical-align:middle,那么得到的效果只是这两个元素之间居中对齐而已。

 

并不会把两个子元素都放在父级的中间。

 

小技巧一:把其中一个元素设置高度百分百,那么这时候另一个元素就会处于父级上下居中的位置了。

 

如图:

 

 

但是这时候就多出来了一个元素了,与需求不符。

 

当然了,如果说你在实际布局中,确实有两个元素,并且其中一个元素可以设置为高度百分百的话,这么做是可以的。

 

小技巧二:想办法把另一个元素消除掉——利用伪元素before,详情请看代码。

 

tips:其实这时候给父级设置一个和父级高度一样的行高也是可行的,不过这个原理太复杂,大家有兴趣可以研究一下哦!

 

第四种:弹性盒模型​​​​​​​

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .content{            width:500px;            height:300px;            border:1px solid #0a3b98;            display: flex;            justify-content: center;            align-items: center;        }        .box{            width:100px;            height:40px;            background: #f0a238;        }</style></head><body> <div class="content">    <div class="box"></div></div> </body></html>

 

效果图就不看了吧,思路感觉也没啥可解释的,这都是css3的功劳,没啥技巧,掌握了弹性盒模型就能掌握这个方法,简单粗暴。

 

快去看看弹性盒模型吧,以后我有时间心情好的话再专门写点这方面的东西

第五种:网格布局 Grid

 

代码:​​​​​​​

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .content{            width:500px;            height:300px;            border:1px solid #0a3b98;            display: grid;            justify-content: center;            align-items: center;        }        .box{            width:100px;            height:40px;            background: #f0a238;        }</style></head><body> <div class="content">    <div class="box"></div></div> </body></html>

 

这个方法和弹性盒模型一样,简单粗暴,没啥可说的。

 

grid网格布局出来没多久,权当做个了解吧,不过这玩意很强大,大家有时间可以了解一下。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值