皓月当空是什么意思(碧波荡漾的意思方法)
一、position元素
第一种:通过 position translateY
a:水平及垂直同时居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
b:水平居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; left: 50%; transform: translateX(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
c:垂直居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; transform: translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
第二种:通过 position margin
a:水平及垂直同时居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
b:水平居中
1 .wrapper { 2 position: relative; 3 width: 300px; 4 height: 300px; 5 border: solid 2px red; 6 border-radius: 5px; 7 } 8 9 .wrapper .content{10 position: absolute;11 left: 50%;12 margin-left: -50px;13 height: 100px;14 width: 100px;15 border: solid 2px blue;16 border-radius: 5px;17 }
c:垂直居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; margin-top: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
二、元素内部信息
第一种:元素内容没有标签,只有内容,这样垂直设置height和line-height一样就可以了,水平设置text-align:center就可以
.wrapper{ height: 50px; line-height: 50px; text-align: center; }
第二种:元素内部元素居中,设置如下:
.wrapper-table{ display: table-cell; height: 100px; width: 100px; vertical-align: middle; text-align: center; border: solid 2px yellow;}.wrapper-table .wrapper-table-cell{ border: solid 2px #009900;}
郑重声明:文章仅代表原作者观点,不代表本站立场;如有侵权、违规,可直接反馈本站,我们将会作修改或删除处理。
相关阅读
猜你喜欢
-
苹果7手机查定位(用苹果id查找手机位置)
2023-03-14 -
mg3怎么(mg3680说明书)
2023-03-14 -
北京二环房价多少一平(北京五环租一室一厅多少钱)
2023-03-14 -
怎么查老公手机定位不让他知道(怎么查找别人手机位置)
2023-03-14 -
怎么查老婆的位置(老婆跑了怎么定位到她位置)
2023-03-14 -
风信子开花多久(风信子哪种颜色稀有)
2023-03-14 -
如何查看对方手机聊天记录(查看对方手机聊天记录的软件)
2023-03-14 -
苹果手机微信的定位怎么查(如何iphone查找对方位置)
2023-03-14 -
酒店入住记录能查几年(怎么查身份证在哪里住过酒店)
2023-03-14 -
怎么查手机被定位了吗(免费查手机定位)
2023-03-14