css如何居中(html鼠标点击按钮后变色)
一、position元素
第一种:通过positiontranslateY
a:水平及垂直同时居中。wrapper{position:relative;width:300px;height:300px;border:solid2pxred;borderradius:5px;}。wrapper。content{position:absolute;top:50;left:50;transform:translateX(50)translateY(50);height:100px;width:100px;border:solid2pxblue;borderradius:5px;}
b:水平居中。wrapper{position:relative;width:300px;height:300px;border:solid2pxred;borderradius:5px;}。wrapper。content{position:absolute;left:50;transform:translateX(50);height:100px;width:100px;border:solid2pxblue;borderradius:5px;}
c:垂直居中。wrapper{position:relative;width:300px;height:300px;border:solid2pxred;borderradius:5px;}。wrapper。content{position:absolute;top:50;transform:translateY(50);height:100px;width:100px;border:solid2pxblue;borderradius:5px;}
第二种:通过positionmargin
a:水平及垂直同时居中。wrapper{position:relative;width:300px;height:300px;border:solid2pxred;borderradius:5px;}。wrapper。content{position:absolute;top:50;margintop:50px;left:50;marginleft:50px;height:100px;width:100px;border:solid2pxblue;borderradius:5px;}
b:水平居中1。wrapper{2position:relative;3width:300px;4height:300px;5border:solid2pxred;6borderradius:5px;7}89。wrapper。content{10position:absolute;11left:50;12marginleft:50px;13height:100px;14width:100px;15border:solid2pxblue;16borderradius:5px;17}
c:垂直居中。wrapper{position:relative;width:300px;height:300px;border:solid2pxred;borderradius:5px;}。wrapper。content{position:absolute;top:50;margintop:50px;height:100px;width:100px;border:solid2pxblue;borderradius:5px;}二、元素内部信息
第一种:元素内容没有标签,只有内容,这样垂直设置height和lineheight一样就可以了,水平设置textalign:center就可以。wrapper{height:50px;lineheight:50px;textalign:center;}
第二种:元素内部元素居中,设置如下:。wrappertable{display:tablecell;height:100px;width:100px;verticalalign:middle;textalign:center;border:solid2pxyellow;}。wrappertable。wrappertablecell{border:solid2px009900;}