css中按钮怎么在div居中

如何在CSS中让按钮在div中居中

Step 1: 给按钮所在的div设置宽度和高度

首先，我们需要给包装我们按钮的div添加宽度和高度，以确保我们的按钮居中。我们可以使用CSS中的height和width属性来设置高度和宽度。例如：

    .btn-div{
        height: 100px;
        width: 200px;
    }

重要提示: 您应该使用适当的单位，例如px、em或rem，根据具体情况选择不同的单位。如果您使用百分比来定义高度和宽度，您需要确保祖先元素和根元素都具有可用的高度和宽度。

Step 2: 水平居中

接下来，我们需要将按钮水平对齐，这可以使用CSS中的text-align属性来完成。为了让按钮水平居中，我们需要在父元素上设置text-align:center。例如：

    .btn-div{
        height: 100px;
        width: 200px;
        text-align: center;
    }

Step 3: 垂直居中

现在我们需要将按钮垂直居中。这可以使用CSS中的line-height属性或display属性来完成。下面我们将详细介绍如何实现这两个属性。

使用line-height属性进行垂直居中

首先，我们可以使用line-height属性实现垂直居中。我们可以添加一个与按钮高度相同的line-height属性值，这样就可以将按钮垂直居中。例如：

    .btn-div{
        height: 100px;
        width: 200px;
        text-align: center;
        line-height: 100px;
    }

重要提示: 如果您的按钮里面包含文字，您需要根据文字大小来设置line-height属性。例如，如果您的按钮高度为80px，文字大小为16px，则您的line-height属性应该设置为80px/16px=5。

使用display:flex属性进行垂直居中

另一种实现垂直居中的方法是使用display:flex属性。我们可以将display属性设置为flex，然后使用align-items:center来使其垂直居中。例如：

    .btn-div{
        height: 100px;
        width: 200px;
        text-align: center;
        display: flex;
        align-items: center;
    }

重要提示: 如果您在使用display:flex属性时无法使按钮垂直居中，请确保其父元素高度是可以被计算的，例如使用px单位。

总结

现在您已经知道在CSS中如何将按钮在div中居中了。我们需要使用width和height属性设置div的高度和宽度，然后使用text-align:center属性将按钮水平居中，最后使用line-height或display:flex属性将按钮垂直居中。