[分享]css中如何让按钮上的字居中

CSS中的按钮是网站设计中常用的元素之一，但是按钮上的字如何居中却是一个常见的问题。下面介绍一些常用的方法。button{ textalign: center;/ 按钮内部文字居中显示 / displ...

CSS中的按钮是网站设计中常用的元素之一，但是按钮上的字如何居中却是一个常见的问题。下面介绍一些常用的方法。

button{
    text-align: center;/* 按钮内部文字居中显示 */
    display: inline-block;/* 将按钮设为行内块元素，容器宽度由内容撑开 */
    vertical-align: middle;/* 将按钮垂直居中对齐 */
    line-height: normal;/* 设置文本行高为正常值，解决行高影响居中问题 */
} 

在这个方法中，我们首先将按钮中的文本水平居中。其次，将按钮设为行内块元素，使得它的宽度可以根据内容进行自适应。同时，使用vertical-align: middle;让按钮在容器中垂直居中对齐。最后使用line-height: normal;解决行高的影响。

button{
    position: relative;/* 设置相对布局 */
    top: 50%;/* 将按钮上移一半的高度 */
    transform: translateY(-50%);/* 将按钮移下来一半的高度，完成垂直居中 */
    display: inline-block;/* 将按钮设为行内块元素 */
    text-align: center;/* 按钮内部文字居中显示 */
} 

这个方法是使用CSS3的transform属性，通过将按钮上移一半的高度，并使用transform: translateY(-50%);将按钮移下来一半的高度来完成垂直居中。同样地，我们也将按钮设为行内块元素，并让内部文本水平居中。

• 使用以上两个方法均可以让按钮内部的文本垂直水平居中，具体使用哪个方法视情况而定。
• 除此之外，还可以使用表格布局或flex布局来实现按钮居中，但这里就不再赘述。