CSS如何让一个按钮居中应该怎么做 css按钮怎么居中
\u5982\u4f55\u7528CSS\u8ba9\u6309\u94ae\u5c45\u4e2d\u663e\u793a\u5982\u679c\u4f60\u60f3\u8ba9\u6309\u94ae\u4e0a\u7684\u6587\u5b57\u5c45\u4e2d\uff0c\u8c03\u6574\u5b57\u4f53\u5927\u5c0f\uff0c\u548c\u6309\u94ae\u7684height\u3001width
\u5982\u679c\u662f\u8c03\u6574\u6309\u94ae\u4f4d\u7f6e\u5c45\u4e2d\uff0c\u90a3\u6709\u5f88\u591a\u529e\u6cd5\uff1a\u7528left\u3001top\u4f4d\u7f6e\u5b9a\u4f4d\u5c45\u4e2d\u5728
\u7528margin\u8c03\u6574\u4f4d\u7f6e
CSS\u4ee3\u7801\u4e3a\uff5bmargin:0 auto;width:80%;height:100%;\uff5d
\u5982\u679c\u662finput\uff0c\u5219\u53ef\u4ee5\u7528\u53e6\u4e00\u79cd\u65b9\u6cd5\uff0c\u5373\u4e0a\u4e00\u7ea7\u7684\u6807\u7b7e\u5b9a\u4e49css\uff5btext-align:center\uff5d
\u5185\u8054\u5143\u7d20(inline element)\u4e3b\u8981\u6709span\uff0c a\uff0cimg\uff0cselect\u7b49
通过这样的Css样式就可以实现：
<div style="margin:0 auto;width:200px;">
<input class="submit" id="btn" type="submit" value="注册" />
</div>
使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。
.style{margin-left:auto;margin-right:auto;} 缩写形式为： .style{margin:0 auto;} ，数字0 表示上下边距是0。
后面的那个width也是个很重要的属性，因为按钮的宽度非常小，所以要设置一个合适的width值才可以让按钮居中。
扩展资料
css中margin属性用法：
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。格式为-margin:10px 5px 15px 20px;
实例:
1、margin:10px 5px 15px 20px;
上边距是 10px，右边距是 5px，下边距是 15px，左边距是 20px；
2、margin:10px 5px 15px;
上边距是 10px，右边距和左边距是 5px，下边距是 15px；
3、margin:10px 5px;
上边距和下边距是 10px，右边距和左边距是 5px；
4、margin:10px;
所有四个边距都是 10px。
方法1 比如 按钮 放在一个 P标签里面 可以 给P加样式 text-align:center
方法2 text-align:center是让容器p里面的内容居中
margin:auto，是让容器p本身居中
俩种办法：
外套一个长宽相等的div 水平居中 margin: 0 auto； 垂直居中：这个div的父元素加上 display：flex， align-items：center；
将这个button 加个样式 display：block；重复上面的俩个居中代码就好了。
其实都是一个道理的，多敲俩下就知道了
用定位，position:absolute;left:0;right:0;bottom:0;top:0;margin:auto;
CSS 需要加载容器上
margin:0 auto;
width:80%;
height:100%;
就可以了
绛旓細 浣跨敤margin-left:auto;margin-right:auto; 鍙互璁╀綘鐨刣iv灞呬腑瀵归綈銆.style{margin-left:auto;margin-right:auto;} 缂╁啓褰㈠紡涓猴細 .style{margin:0 auto;} 锛屾暟瀛0 琛ㄧず涓婁笅杈硅窛鏄0銆傚悗闈㈢殑閭ｄ釜width涔熸槸涓緢閲嶈鐨勫睘鎬э紝鍥犱负鎸夐挳鐨勫搴﹂潪甯稿皬锛屾墍浠ヨ璁剧疆涓涓悎閫傜殑width鍊兼墠鍙互璁╂寜閽眳涓
绛旓細鑻ユ槸琛屽唴鍏冪礌, 缁欏叾鐖跺厓绱犺缃 text-align:center,鍗冲彲瀹炵幇琛屽唴鍏冪礌姘村钩灞呬腑.鑻ユ槸鍧楃骇鍏冪礌, 璇ュ厓绱犺缃 margin:0 auto鍗冲彲.鑻ュ瓙鍏冪礌鍖呭惈 float:left 灞炴, 涓轰簡璁╁瓙鍏冪礌姘村钩灞呬腑, 鍒欏彲璁╃埗鍏冪礌瀹藉害璁剧疆涓篺it-content,骞朵笖閰嶅悎margin, 浣滃涓嬭缃:.parent{width: -moz-fit-content;width: -webkit-...
绛旓細鍏蜂綋鎿嶄綔锛鍦–SS闈㈡澘閲岄潰鎵惧埌鈥滆儗鏅濓紝涔嬪悗鍐嶇浉搴旂殑background-position(x)(鍜宐ackground-position(y)閲岄潰杈撳叆鐩稿簲鐨勬暟鍊锛堟瘮濡100锛夊氨濂斤紝涔熷彲杈撳叆濡傛灉鈥渓eft鈥濄佲渞ight鈥濇垨鈥渃enter鈥濓紙鍒嗗埆浠ｈ〃宸﹀榻愩佸彸瀵归綈鍜屽眳涓榻愶級銆傚彲鑰冭檻鐢ㄧ粷瀵瑰畾浣嶏細img{position:relative;top:200px;left:200px;} 鐢ㄤ唬鐮佸啓...
绛旓細1銆侀鍏堝湪HTML涓垱寤轰竴涓寜閽厓绱狅紝渚嬪銆2銆佺劧鍚锛屼娇鐢–SS鏉ヨ缃寜閽殑鏍峰紡锛屽皢鎸夐挳鍏冪礌璁剧疆涓哄潡绾у厓绱狅紝骞惰缃叾瀹藉害鍜岄珮搴︺3銆佺劧鍚庝娇鐢ㄦ枃鏈榻愬睘鎬ext-align锛歝enter锛涙潵灞呬腑鏂囨湰銆4銆佹渶鍚庯紝浣跨敤CSS鏍峰紡灏嗘寜閽厓绱犲強鍏舵枃鏈眳涓
绛旓細浣跨敤CSS鐨刦lex甯冨眬銆傝璁╂寜閽眳涓紝鍙互浣跨敤CSS鐨刦lex甯冨眬銆傚皢鎸夐挳鎵鍦ㄧ殑鐖跺厓绱犺缃负flex瀹瑰櫒锛屽苟浣跨敤justify-content锛歝enter锛涘拰align-items锛歝enter锛涘睘鎬ф潵浣垮唴瀹规按骞冲拰鍨傜洿灞呬腑銆
绛旓細1銆佹柊寤轰竴涓猦tml鏂囦欢锛屽懡鍚嶄负test.html锛岀敤浜庤瑙CSS鎬庢牱璁╀竴涓div灞呬腑銆2銆佸湪test.html鏂囦欢涓紝浣跨敤div鏍囩鍒涘缓涓涓ā鍧楋紝鐢ㄤ簬娴嬭瘯灞呬腑鏁堟灉銆3銆佸湪test.html鏂囦欢涓紝璁剧疆div鐨刢lass灞炴т负test锛屼笅闈㈠皢閫氳繃璇lass灞炴ц缃叾css鏍峰紡銆4銆佸湪test.html鏂囦欢鍐咃紝缂栧啓鏍囩锛岄〉闈㈢殑css鏍峰紡灏嗗啓鍦ㄨ鏍囩鍐呫5銆...
绛旓細1銆侀鍏堟墦寮SublimeText杞欢锛屾柊寤涓涓HTML椤甸潰锛2銆佺劧鍚庢垜浠湪html椤甸潰涓姞鍏鏍囩锛屽苟涓斿湪p鏍囩涓姞鍏ヤ竴浜涙枃瀛楋紝3銆佹帴涓嬫潵鎴戜滑缁檖鏍囩缂栧啓CSS鏍峰紡锛岃繖閲屼富瑕佹槸text-align鍜宭ine-height涓や釜灞炴э紝4銆佹渶鍚庢垜浠繍琛岄〉闈㈢▼搴忥紝浣犲氨浼氬湪椤甸潰涓湅鍒皃涓殑鏂囧瓧姘村钩鍨傜洿閮灞呬腑浜嗐俬tmlcss閲岄潰锛屼竴涓猵閲岀殑ul鎬庝箞璁...
绛旓細1.寤虹珛txt鏂囨。锛屾洿鏀瑰悗缂鍚嶄负html,濡傚浘锛2.鍙冲嚮html鏂囦欢锛岄夋嫨鐢ㄨ浜嬫湰鎵撳紑锛屽鍥撅細3.璁茶В绗竴绉峝iv缁濆瀹氫綅姘村钩鍨傜洿灞呬腑銆CSS3浣跨敤transform銆戯紝 transform涓璽ranslate鍋忕Щ鐨勭櫨鍒嗘瘮鍊兼槸鐩稿浜庤嚜韬ぇ灏忕殑锛屾棤璁虹粷瀵瑰畾浣嶅厓绱犵殑灏哄鏄灏戯紝鍏堕兘鏄按骞冲瀭鐩村眳涓樉绀虹殑锛屼絾闂鏄吋瀹规т笉濂姐侷E9+浠ュ強鍏朵粬鐜颁唬...
绛旓細涓嶅畾瀹藉潡鐘跺厓绱3 閫氳繃缁 鐖跺厓绱犺缃 float锛岀劧鍚庣粰 鐖跺厓绱犺缃 position:relative鍜 left:50%锛 瀛愬厓绱犺缃 position:relative 鍜 left:-50%鏉ュ疄鐜版按骞灞呬腑 鍨傜洿灞呬腑 鐖跺厓绱犻珮搴︾‘瀹氱殑鍗曡鏂囨湰 鍨傜洿灞呬腑鐨勬柟娉曟槸閫氳繃 璁剧疆鐖跺厓绱犵殑height鍜宭ine-height楂樺害涓鑷存潵瀹炵幇鐨 璇村埌绔栫洿灞呬腑锛css 涓湁涓涓鐢ㄤ簬...
绛旓細1.鏂板缓涓涓html鏂囦欢锛屽懡鍚嶄负test.html锛岀敤浜庤瑙ｅ埄鐢CSS鎬庝箞璁鏂囧瓧灞呬腑銆2.鍦╰est.html鏂囦欢鍐咃紝浣跨敤p鏍囩鍒涘缓涓涓ā鍧楋紝骞惰缃叾class灞炴т负bob锛屼笅闈㈠皢閫氳繃璇lass璁剧疆鍏禼ss鏍峰紡銆3.鍦╰est.html鏂囦欢鍐咃紝鍦╬鏍囩鍐咃紝浣跨敤p鏍囩鍒涘缓涓琛屾枃瀛楋紝涓嬮潰灏嗗埄鐢–SS璁╂枃瀛楀眳涓4+鍦╰est.html鏂囦欢鍐咃紝缂栧啓styletype...
