CSS 居中一個(gè) input 可以使用以下兩種方法:
input { display: block; margin: 0 auto; }
這種方法通過(guò)將 input 元素的 display 屬性設(shè)置為塊級(jí)元素并在其上下文中居中來(lái)實(shí)現(xiàn)。其中 margin 屬性的值是0 auto
,它將使 input 水平居中在其容器中。
input { position: absolute; left: 50%; transform: translateX(-50%); }
這種方法使用絕對(duì)定位將 input 元素放置在其父元素中的中心位置。其中 left 屬性設(shè)置為50%
,將 input 往右移動(dòng)了父容器寬度的一半。接下來(lái),使用 transform 屬性并結(jié)合translateX(-50%)
來(lái)將 input 向左移動(dòng)其本身寬度的一半,從而實(shí)現(xiàn)居中效果。