草丁图书馆

  1. 首页 > 生活百科 >

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

    推荐阅读


    上一篇：有关于掩饰的名言

    下一篇：莲子米炒藕带