html代码让按钮垂直居中

很多时候，我们需要在网页中加入按钮来进行某些操作，但是按钮的位置却难以控制，特别是居中垂直对齐这一点。本文介绍如何使用HTML代码让按钮垂直居中。

    div class="container">
            button>
    按钮/button>
        /div>

首先，在 HTML 中创建一个 div 容器，再在容器中添加按钮。因为我们需要让按钮的垂直居中，所以需要给容器设置一定的高度，比如 200px，然后设置容器的 display 为 flex 布局，这样按钮就会纵向居中。

    .container{
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
    }
    button{
            width: 100px;
            height: 50px;
            background-color: blue;
            color: #fff;
    }
    

接下来，我们需要添加 CSS 样式来设置容器和按钮的样式。通过设置 justify-content 和 align-items 属性为 center，即可让容器中的元素在横向和纵向上都居中对齐。按钮的宽度和高度设置为一定值，样式可以根据需要进行修改。

现在我们已经完成了按钮垂直居中的设置，以上的 HTML 代码和 CSS 样式可以很容易地套用在其他的页面中。如果你想水平居中按钮，只需给容器设置 text-align: center; 即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！