CSS3按鈕居中的方法
.btn{
display: inline-block;
padding: 10px 20px;
background-color: #f6f6f6;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.center{
text-align: center;
}在HTML中，我們通常使用button或input type="button"等元素來創(chuàng)建按鈕。在CSS3中，我們可以使用偽類、盒模型、flex布局等方法來實現(xiàn)按鈕的居中。以下為幾種常用的方法：
1.使用text-align屬性居中
將按鈕所在的父級元素設(shè)置text-align:center即可實現(xiàn)按鈕居中。但是，如果父級元素是塊級元素，則需要將其轉(zhuǎn)換為行內(nèi)或行內(nèi)塊級元素，例如display:inline或display:inline-block
2.使用flex布局
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}使用flex布局不僅可以實現(xiàn)水平和垂直居中，還能夠在父級元素中對多個子元素進行居中對齊。
3.使用position屬性
.position-center{
position: relative;
text-align: center;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}使用position屬性將按鈕相對于其父元素進行絕對定位，再使用transform屬性將其水平和垂直偏移50%，即可實現(xiàn)按鈕的居中。這種方法需要注意按鈕寬高的設(shè)置，以及父級元素的寬高是否固定。
上一篇css 右邊漂浮浮動
下一篇css 右邊邊框