[分享]css中如何让文本框居中显示

CSS中如何让文本框居中显示在网页制作中，有时需要将文本框居中显示，使页面布局更加美观。本文介绍几种实现文本框居中显示的CSS方法。方法一：使用textalign属性在文本框所在的容器中，设置text...

CSS中如何让文本框居中显示
在网页制作中，有时需要将文本框居中显示，使页面布局更加美观。本文介绍几种实现文本框居中显示的CSS方法。
方法一：使用text-align属性
在文本框所在的容器中，设置text-align属性为center，即可让文本框居中显示。例如：

 <div style="text-align:center;">
        <input type="text" name="username">
    </div> 

方法二：使用margin属性
在style中设置margin属性，将左右margin设置为auto，即可使文本框水平居中。例如：

 <div style="margin: 0 auto;">
        <input type="text" name="username">
    </div> 

方法三：使用flex布局
在文本框所在的容器中，使用flex布局，并设置justify-content属性为center，即可让文本框水平居中。例如：

 <div style="display: flex; justify-content: center;">
        <input type="text" name="username">
    </div> 

总结
以上就是几种实现文本框居中显示的方法，其中使用margin属性和flex布局是最常用的方法。根据实际需求选择合适的方法，使页面布局更加美观。