您的位置:首页 >智能 >

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

时间:2022-05-05 16:36:43 来源:[db:来源]

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


郑重声明:文章仅代表原作者观点,不代表本站立场;如有侵权、违规,可直接反馈本站,我们将会作修改或删除处理。