html鼠标点击按钮后变色 css如何居中

一、position元素第一种：通过 positiontranslateY
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;}【html鼠标点击按钮后变色 css如何居中】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;} 第二种：通过 positionmargin
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 { 2position: relative; 3width: 300px; 4height: 300px; 5border: solid 2px red; 6border-radius: 5px; 7 } 89 .wrapper .content{10position: absolute;11left: 50%;12margin-left: -50px;13height: 100px;14width: 100px;15border: solid 2px blue;16border-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;}

html鼠标点击按钮后变色 css如何居中

推荐阅读

大数据黑了怎么贷款

怀胎十月胎儿会做些什么？

莆田职工医保断缴了怎么办莆田医保如何补缴

用铁锅能炖汤吗

疫情防控安全注意事项ppt 疫情防控安全注意事项

ATM无卡存款最晚多久到账

乐町属于几线品牌

小米怎么下载gshock

液压系统和电子系统为什么有如此多的共同点

韩国地暖几月份关比较好

火龙果晚上吃可以吗火龙果晚上能不能吃?

经期能吃鸡块吗

怎么让橡皮树分叉

你的名字电影解析

下班途中被撞伤是否属于工伤

李颖中国最美女富豪身高多少

百丽属于几线品牌

孕期怎么避免胎儿脐带绕颈

若歌诗多肉怎么养殖

顺远是现在的哪个城市